模拟百度分享左侧缓慢滑出与缓慢消退效果
实现效果：当鼠标移入蓝色区块时，绿色区块随即缓慢向右滑出。当鼠标移出该绿色滑块后，滑块随即缓慢向左消退。
完成效果图
主要设计思路：【1】划入与滑出效果为使用定时器不间断改变区块的left值实现。因此区块需要采用绝对定位的方式。【2】划入鼠标，left值不断增加，直至绿色区块left值从负数变为0，移出鼠标，left值不断减小，直至区块left值令绿色区块完全隐藏。
构建HTML结构：
<!doctype html> <html> <head> <title>表格排序</title> <meta charset="utf-8"> <style> html{font-family:楷体;} #div1{width:150px;height:200px;background:green;position:absolute;left:-150px;} #div1 span{width:20px;height:60px;position:absolute;line-height:20px;background:blue;right:-20px;top:70px;} </style> </head> <body> <div id='div1'> <span>分享到</span> </div> </body> </html>
window.onload=function() { var oDiv=document.getElementById('div1'); var timer=null; //移入区块鼠标向右滑动以及滑块停止条件 oDiv.onmouseover=function() { timer=setInterval(function() { if(oDiv.offsetLeft>=0) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+2+'px'; } } ,30) } }
鼠标移入，滑块向右逐渐出现；鼠标移出，滑块向左逐渐消退。
window.onload=function() { var oDiv=document.getElementById('div1'); var timer=null; //移入区块鼠标向右滑动以及滑块停止条件 oDiv.onmouseover=function() { clearInterval(timer); timer=setInterval(function() { if(oDiv.offsetLeft==0) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+10+'px'; } } ,30) } oDiv.onmouseout=function() { clearInterval(timer); timer=setInterval(function() { if(oDiv.offsetLeft==-150) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft-10+'px'; } } ,30) } }
完毕代码
window.onload=function() { var oDiv=document.getElementById('div1'); var timer=null; //移入区块鼠标向右滑动以及滑块停止条件 oDiv.onmouseover=function() { clearInterval(timer); timer=setInterval(function() { if(oDiv.offsetLeft==0) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+10+'px'; } } ,30) } oDiv.onmouseout=function() { clearInterval(timer); timer=setInterval(function() { if(oDiv.offsetLeft==-150) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30) } }
做成运动框架：
【1】相似的函数进行合并，相同部分不变，相异部分用参数替代。
window.onload=function() { var oDiv=document.getElementById('div1'); var timer=null; var speed=10; function move(speed,iTarget) { clearInterval(timer); timer=setInterval(function move() { if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } //移入区块鼠标向右滑动以及滑块停止条件 oDiv.onmouseover=function() { move(10,0); } oDiv.onmouseout=function() { move(-10,150); } }
【2】减少参数数量。在功能完全一样的情况下，参数越少越好。
扫描二维码关注公众号，回复：
2268902 查看本文章
window.onload=function() { var oDiv=document.getElementById('div1'); var timer=null; var speed=0; function move(iTarget) { if(oDiv.offsetLeft<iTarget) { speed=10; } else { speed=-10; } clearInterval(timer); timer=setInterval(function move() { if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } //移入区块鼠标向右滑动以及滑块停止条件 oDiv.onmouseover=function() { move(0); } oDiv.onmouseout=function() { move(-150); } }
speed值的判断解析：
if(oDiv.offsetLeft<iTarget)
{
speed=10;
}
else
{
speed=-10;
}
oDiv.offsetLeft的取值范围
-150<oDiv.offsetLeft<0
当oDiv逐渐展开时，从起始点-150到iTarget0，此时速度需要为正值；当oDiv逐渐隐藏时，从起始点0到iTarget-150，此时速度需要为负值；
产生问题：oDiv元素停止定时器的限定条件没有起到预期作用，滑块向右移动未停止。
onclick触发事件与onmouseover触发事件有什么区别？为什么类似的代码采用onclick触发事件就没有这种情况？
oDiv.onmouseover=function() { timer=setInterval(function() { if(oDiv.offsetLeft==0) { clearInterval(timer); } oDiv.style.left=oDiv.offsetLeft+10+'px'; } ,30) }
采用onclick的代码
<!doctype html> <html> <head> <title>表格排序</title> <meta charset="utf-8"> <style> html{font-family:楷体;} #div1{width:150px;height:200px;background:green;position:absolute;left:-150px;} #div1 span{width:20px;height:60px;position:absolute;line-height:20px;background:blue;right:-20px;top:70px;} </style> <script> window.onload=function() { var oDiv=document.getElementById('div1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { timer=setInterval(function() { if(oDiv.offsetLeft==0) { clearInterval(timer); } oDiv.style.left=oDiv.offsetLeft+10+'px'; } ,30) } } </script> </head> <body> <input type='button' value='startMove' id='btn1'> <div id='div1'> <span>分享到</span> </div> </body> </html>