思路: 1,临界值是 -150 和 0 如果大于临界值,就要隐藏 2,隐藏:速度为负 显示:速度为正 3,如果与临界值相等,就清空定时器 否则,就运动 --------------------------------html
<div id="div1"><span>分享到</span></div>
<style> #div1 { position:absolute; left:-150px; width:150px; height:200px; background:green;} #div1 span {position:absolute; right:-20px; top:70px; width:20px; height:60px; line-height:20px; background:blue;} </style> ----------------------------------------js
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); var timer = null; oDiv.onmouseover = function(){ showHide(0); } oDiv.onmouseout = function(){ showHide(-150); } //优化成一个方法 function showHide(iCritical){ clearInterval(timer); var speed; timer = setInterval(function(){ if(oDiv.offsetLeft > iCritical){ speed = -10; }else{ speed = 10; } if(oDiv.offsetLeft == iCritical){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + "px"; } },30); } //展开 function show(){ clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft>=0){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + 10 + "px"; } },30); } //隐藏 function hide(){ clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft==-150){ //这里是等于 clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft - 10 + "px"; } },30); } } </script>
js“分享到”侧边框伸缩实现
时间: 2024-11-08 07:47:15