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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
1 如何训练狗狗不叫
2 训练狗狗不叫
3 训练狗狗随行
4 怎么训练狗狗不叫
7 训练比熊狗狗教程
10 上海狗狗训练
11 怎么训练狗狗上厕所
12 训练狗狗趴下
13 狗狗服从训练
14 训练狗狗拒食
15 训练狗狗笑
16 训练狗狗大便
17 训练狗狗立
18 训练狗狗捡东西