標籤：style blog http os width io
基本思路：採用定時器，為滑鼠添加onmouseover和onmouseout功能，採用上一篇文章所寫的js運動的實現方法來實現網站側欄的“分享到”功能。
<!DOCTYPE HTML><!----><html><head><meta charset="utf-8"><title></title><style>#div1{width:150px;height:200px;background:green;position:absolute;top:50px;left:-150px;}#div1 span{position:absolute;width:20px;height:60px;line-height:20px;background:blue;right:-20px;top:70px;}</style> <script>window.onload=function (){var oDiv=document.getElementById('div1');oDiv.onmouseover=function (){startMove(0);};oDiv.onmouseout=function (){startMove(-150);};};var timer=null;function startMove(iTarget){var oDiv=document.getElementById('div1');clearInterval(timer);//保證只有一個定時器在工作，不會因為連續點擊多次按鈕而開啟多個定時器，從而導致速度變快timer=setInterval(function (){var speed=0;if(oDiv.offsetLeft>iTarget){speed=-10;}else{speed=10;}if(oDiv.offsetLeft==iTarget){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30)}</script></head><body><div id="div1"><span>分享到</span></div></body></html>：
側欄的“分享到”初始狀態：
當滑鼠移進“分享到”時，顯示如下:
當滑鼠移出該地區時，顯示如下：
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
