1、“分享栏”：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 {width: 150px;height: 200px;background: red;position: absolute;left: -150px;} #div1 span{width: 20px;height: 60px;position: absolute;top: 70px;right: -20px; background: green;line-height: 20px;} </style> <script> window.onclick = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(10); } oDiv.onmouseout = function(){ startMove(-10); } } var timer = null; function startMove (speed){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ if(speed > 0 && oDiv.offsetLeft == 0){ clearInterval(timer); }else if(speed < 0 && oDiv.offsetLeft == -150){ clearInterval(timer); }else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); } </script> </head> <body> <div id = "div1"> <span>分享到</span> </div> </body> </html> 2、淡入淡出： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 {height: 200px;width: 200px;background: red; filter: alpha(opacity:30) ;opacity: 0.3;} //透明度浏览器兼容问题,前者支持IE; 后者支持FF,Chrome </style> </head> <script> window.onclick = function(){ var oDiv= document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(100); } oDiv.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); var speed = 0; clearInterval(timer); timer = setInterval(function(){ if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity:'+ alpha +')'; oDiv.style.opacity = alpha/100; } },30); } </script> <body> <div id = "div1"> </div> </body> </html>