First put out two pictures:
Today's share is Xiaomi mobile phone system button case, I am a beginner, so some code is not very accurate writing, compatibility is not debugging, heavy in the record and share ideas, please all the way the big god lot of guidance [embrace]
HTML section:
< Body > < ID= "container"> <id= "BTN" ></div> </div> </ Body >
CSS section:
#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 section:
Window.onload=function(){ varOdiv=document.getelementbyid ("Container"); varObtn=document.getelementbyid ("BTN"); Odiv.onclick=function(){ varObtnmarginleft=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"; }); } } } functionStartmove (OBJ,ATTR,ITARGET,FN) {clearinterval (Obj.timer); Obj.timer=setinterval (function(){ varIcur=parseint (GetStyle (obj,attr)); varIspeed= (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); } functionGetStyle (obj,attr) {if(obj.currentstyle) {returnObj.currentstyle[attr]; }Else{ returngetComputedStyle (obj,false) [attr]; } }
Explanation of ideas:
1, the layout is actually very simple, I use two div nesting, one is the button outside the container, one is the internal movement of the object
2, here need to emphasize is that the beginner may encounter a problem, that is, when an object needs to move, to add positioning elements, and in this case, I let the margin value of the embedded element in the change, so do not need to locate the element.
3, in addition to JS, I wrote a simple motion frame, is a buffer movement, let the button in the process of use more friendly.
If you have any good suggestions and better solutions, please leave a message to suggest.
How to write a button in Xiaomi phone system