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

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

新老客户大回馈,云服务器低至5折

首先贴出两张图:

 

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

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中,自己写了一个简单的运动框架,是一个缓冲运动,让按钮在使用的过程中更加的友好。

如果各位网友有什么好的建议以及更好的解决方案,欢迎留言提建议。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端学习之select控件的使用1

下一篇:Js操作DOM 根据页面滚动位置显示浮动框