標籤：
就是當滑鼠移到上面的時候，他會出現，滑鼠移出就消失。
nmouseover和nmouseout就能實現
<style>*{padding:0;margin:0;} #s1{width:200px ; background:red; height:200px; position:absolute; top:50px; left:-200px; cursor:pointer;} #s1 span{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}}</style><body><div id="s1"> <span>分享到</span></div> </body>
js代碼如下
<script> window.onload=function() { var div1=document.getElementById("s1"); var span1=s1.getElementsByTagName("span")[0]; div1.onmouseover=function() { startMove(0); } div1.onmouseout=function() { startMove(-200); } }; var timer=null; function startMove(ti) { var div1=document.getElementById("s1"); clearInterval(timer); timer=setInterval(function() { var speed=null; if (div1.offsetLeft>ti) //先判斷他的速度是正的還是負的，如果offsetLeft大於0，速度為負 { speed=-10; } else //否則速度為正，顯示div要出來 { speed=10; } if (div1.offsetLeft==ti) //相等，停止運動 { clearInterval(timer); } else //不相等，做勻速運動 { div1.style.left=div1.offsetLeft+speed+‘px‘; } },30); }</script>
其實特別簡單，只要收敲敲就會，
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
