<! DOCTYPE html>"ZH">"UTF-8"/> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"/> <meta http-equiv="x-ua-compatible"Content="Ie=edge"/> <title>Document</title>#div1 {width:150px; height:200px; Background-Color:green; Position:absolute; Left:-150px; } #div1 span{Position:absolute; width:20px; height:60px; Line-h eight:20px; Background:blue; Right:-20px; top:70px; }</style><body> <div id="Div1"> <span> share to </span> </div> </BODY&G T;<script type="Text/javascript"Src="Jquery.js"></script><script type="Text/javascript">window.onload=function () {varOdiv=document.getelementbyid ('Div1'); Odiv.onmouseover=function () {Startmove (0); } odiv.onmouseout=function () {Startmove (- Max); } } varTimer=NULL; function Startmove (itarget) {varOdiv=document.getelementbyid ('Div1'); Clearinterval (timer); Timer=setinterval (function () {varSpeed=0; if(odiv.offsetleft>itarget) { speed=-Ten; }Else{ speed=Ten; } if(odiv.offsetleft==itarget) {clearinterval (timer); }Else{oDiv.style.left=odiv.offsetleft+speed+'px'; } }, -); } </script>JS Implementation site Home share slider