标签：art odi 添加 自己 png nbsp title 技术 code
首先贴出两张图：
今天分享的就是小米手机系统中按钮案例，本人是初学者，所以有些代码写的并不十分的准确，兼容性方面也没有调试，重在记录和分享思路，请各路大神多多指点[抱拳]
HTML部分：
<body> <div id="container"> <div id="btn"></div> </div> </body>
CSS部分：
#container {
position: relative;
left: 200px;
top: 100px;
border: 1px solid #c2c2c2;
width: 66px;
height: 26px;
border-radius: 50px 50px 50px 50px;
padding: 4px;
}
#btn {
width: 26px;
height: 26px;
border-radius: 26px;
background: #ededed;
margin-left:0px;
}
JS部分：
window.onload=function(){ var oDiv=document.getElementById("container"); var oBtn=document.getElementById("btn"); oDiv.onclick=function(){ var oBtnMarginLeft=parseInt(getStyle(oBtn,"marginLeft")); console.log("oBtnMarginLeft="+oBtnMarginLeft); if(oBtnMarginLeft>0){ startMove(oBtn,"marginLeft",0,function(){ oBtn.style.backgroundColor="#ededed"; }); }else{ startMove(oBtn,"marginLeft",38,function(){ oBtn.style.backgroundColor="#33b4ff"; }); } } } function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iCur=parseInt(getStyle(obj,attr)); var iSpeed=(iTarget-iCur)/3; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); document.title=iCur; if(iCur==iTarget){ clearInterval(obj.timer); // console.log(getStyle(obj,"left")); if(fn)fn(); }else{ iCur+=iSpeed; obj.style[attr]=iCur+"px"; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
思路讲解：
1、布局其实就非常简单了，我采用的是两个div嵌套，一个是按钮外部的容器，一个是内部运动的物体
2、在这里需要强调的是，初学者可能会遇到的一个问题，就是当一个物体需要运动的时候，要给元素添加定位，而在本案例中，我是让内嵌元素的margin值在变动，所以不需要给元素进行定位。
3、另外在js中，自己写了一个简单的运动框架，是一个缓冲运动，让按钮在使用的过程中更加的友好。
如果各位网友有什么好的建议以及更好的解决方案，欢迎留言提建议。
标签：art odi 添加 自己 png nbsp title 技术 code
原文地址：http://www.cnblogs.com/sunyafei/p/7618048.html
