如何去写小米手机系统中的按钮

2018-06-24 00:25:18来源：未知阅读 ()

首先贴出两张图：

今天分享的就是小米手机系统中按钮案例，本人是初学者，所以有些代码写的并不十分的准确，兼容性方面也没有调试，重在记录和分享思路，请各路大神多多指点[抱拳]

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];
                }
            }