js仿小米手机上下滑动效果
本文实例为大家分享了js上下滑动效果的具体代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <style> .box{ width:512px; height:400px; margin:100pxauto; overflow:hidden; position:relative; border:1pxsolidred; } .boximg{ position:absolute; left:0; top:0; } .boxdiv{ width:512px; height:200px; position:absolute; left:0; } .up{ top:0; } .down{ top:200px; } </style> <script> window.onload=function(){ function$(id){returndocument.getElementById(id);} varnum=0; vartimer; vartimer1; $("picup").onmouseover=function(){//往下走 timer=setInterval(function(){ if(num>=0){ clearInterval(timer); }else{ num+=3; $("pic").style.top=num+"px"; } },10); } $("picup").onmouseleave=function(){ clearInterval(timer); } $("picdown").onmouseover=function(){//往上走 timer1=setInterval(function(){ if(num<=-1070){ clearInterval(timer1); }else{ num-=3; $("pic").style.top=num+"px"; } },30); } $("picdown").onmouseleave=function(){ clearInterval(timer1); } } </script> </head> <body> <divclass="box"> <imgsrc="mi.png"alt=""id="pic"> <divclass="up"id="picup"></div> <divclass="down"id="picdown"></div> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。