//方法一
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享按钮，展开收起效果（基础原理方法）</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ 200px; height: 200px; background: red; position: relative; left: -200px; top: 0; } #div1 span{ 20px; height: 50px; background: blue; position: absolute; left: 200px; top: 75px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1');//获取对象 oDiv.onmouseover = function(){//给对象绑定事件 startMove(); } oDiv.onmouseout = function(){ startMove1(); } } var timer = null;//声明定时器先为空 function startMove(){ clearInterval(timer);//进入函数执行定时器之前先清除所有的定时器 var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == 0){ //如果当前对象left值为0也就是已经展开的状态 clearInterval(timer);//那么就清除定时器，也就是停止运动 }else{ oDiv.style.left = oDiv.offsetLeft+10+'px';//否则就从-200一直没个30ms加10像素一直到0为止 } },30) } function startMove1(){//移出函数原理与移入相同 clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == -200){//如果对象当前left值为-200也就是收起状态 clearInterval(timer);//那么就清除定时器 }else{ oDiv.style.left = oDiv.offsetLeft-10+'px';//否则就执行元素从0一直减10像素一直到-200为止 } },30) } </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>
//方法2：将变量拿出作为参数传递，简化为一个函数
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享按钮，展开收起效果（传参）</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background: red; position: relative; left: -200px; top: 0; } #div1 span{ width: 20px; height: 50px; background: blue; position: absolute; left: 200px; top: 75px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(10,0); } oDiv.onmouseout = function(){ startMove(-10,-200); } } var timer = null; function startMove(speed,iTarget){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>
//方法三 传一个参数：目标值。在进入定时器时就声明速度，如果当前值大于目标值，说明是收起，则速度为-10，如果当前值小于目标值，说明是展开，则速度为10
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享按钮，展开收起效果（传一个参数）</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background: red; position: relative; left: -200px; top: 0; } #div1 span{ width: 20px; height: 50px; background: blue; position: absolute; left: 200px; top: 75px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200); } } var timer = null; function startMove(iTarget){ clearInterval(timer); var oDiv = document.getElementById('div1'); 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 id="share">分享</span> </div> </body> </html>
分享按钮，展开收起效果（传一个参数）