<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OOP侧边分享按钮</title> <style type="text/css"> body { margin: 0; padding: 0; } #guo { width: 150px; height: 200px; background-color: grey; position: fixed; left: -150px; top: 100px; } #guo span { width: 15px; height: 50px; background-color: red; position: absolute; right: -15px; } </style> <script type="text/javascript"> function GuoMove(oDiv){ this.oTimer = null; var oSpan = oDiv.getElementsByTagName("span")[0]; var _this = this; oDiv.onmouseover = function(){ _this.fnOver(oDiv); }; oDiv.onmouseout = function(){ _this.fnOut(oDiv); }; } GuoMove.prototype.fnOver = function(oDiv){ clearInterval(this.oTimer); this.oTimer = setInterval(function(){ if(oDiv.offsetLeft<0) oDiv.style.left = oDiv.offsetLeft+10+"px"; },30); }; GuoMove.prototype.fnOut = function(oDiv){ clearInterval(this.oTimer); this.oTimer = setInterval(function(){ if(oDiv.offsetLeft>-150) oDiv.style.left = oDiv.offsetLeft-10+"px"; },30); }; window.onload = function(){ var oDiv = document.getElementById("guo"); var oGuoMove = new GuoMove(oDiv); }; </script> </head> <body> <div id="guo"> <span></span> </div> </body> </html>