<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>只传一个参数</title> <style type="text/css"> .div { width: 100px; height: 100px; background-color: chartreuse; margin-top: 50px; position: absolute; left: -100px; top: 0; cursor: pointer; } .div span{ display: block; width: 20px; height: 50px; position: absolute; right: -20px; top: 50%; margin-top: -25px; background-color: coral; font-size: 10px; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ start(0); }; oDiv.onmouseout = function(){ start(-100); }; }; var timer = null; //功能一抹一样的函数，参数越少越好。 function start(iTarget) { var oDiv = document.getElementById('div'); 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 class="div" id="div"><span>分享到</span></div> </body> </html>
学习路径与来源：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc