<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>js Implementing Sidebar popup animations</title> <styletype= "Text/css"> *{margin:0;padding:0;}#box{width:200px;Height:200px;Background-color:#ccc;position:Absolute; Left:-200px;Top:500px;}#share{Display:Block;font-size:16px;Line-height:30px;font-family:Microsoft Ya-Black;text-align:Center;width:24px;Height:60px;Background-color:Orange;position:Absolute; Left:200px;Top:70px;} </style> <Scripttype= "Text/javascript">window.onload=function(){ varBox=document.getElementById ("Box"); Box.onmouseover= function() {Move (Ten) }; Box.onmouseout= function() {Move (-Ten) }; } vartimer; functionMove (SPD) {clearinterval (timer); varBox=document.getElementById ('Box'); Timer=SetInterval (function() {console.log (box.offsetleft); if(Box.offsetleft== - -+Ten*SPD) {clearinterval (timer); }Else{box.style.left=Box.offsetleft+SPD+'px'; } }, -); } </Script></Head><Body> <DivID= "box"style=""><spanID= ' Share '>Share</span></Div></Body></HTML>
Problems encountered and precautions:
1, the value of the Offset property is a number, there is no ' px ' unit.
2, Element.style can only get the properties of the inline CSS and the properties set with Element.style.*= '. Properties of non-inline CSS are obtained using the Element.getattribute () method.
JS to implement sidebar popup animation