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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。