分享按钮，移入移出效果
Posted clear93
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分享按钮，移入移出效果相关的知识，希望对你有一定的参考价值。
<!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(); } 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>
以上是关于分享按钮，移入移出效果的主要内容，如果未能解决你的问题，请参考以下文章