標籤：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中，自己寫了一個簡單的運動架構，是一個緩衝運動，讓按鈕在使用的過程中更加的友好。
如果各位網友有什麼好的建議以及更好的解決方案，歡迎留言提建議。
如何去寫小米手機系統中的按鈕
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
