图片的上下滑动

最新推荐文章于 2023-09-07 17:05:23 发布

weixin_30278237

最新推荐文章于 2023-09-07 17:05:23 发布

阅读量280

点赞数

原文链接：http://www.cnblogs.com/aa-bb/p/6021659.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.xiaomi{
width: 512px;
height: 400px;
border: 1px solid #f00;
margin: 100px auto;
overflow: hidden;
position: relative;
}

.xiaomi span{
display: block;
position: absolute;
left: 0;
width: 100%;
height: 100px;
background-color: rgba(0,0,0,.2);
cursor: pointer;
}
.up{
top: 0;
}
.down{
bottom: 0;
}
#pic{
position: absolute;
top: 0;
left: 0;
}

</style>
</head>
<body>
<div class="xiaomi">
<img src="mi.png" alt="图片有问题" id="pic" />
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
</html>

//在当前的额picUp的id选择器的范围内
$("picUp").onmouseover = function(){
clearInterval(timer);

timer = setInterval(function(){
num -= 3;
num >= -1070 ? $("pic").style.top = num + "px" : clearInterval(timer);
},30)

}

//在当前的额picDown的id选择器的范围内
$("picDown").onmouseover = function(){
clearInterval(timer); //排它思想
timer = setInterval(function(){
num +=3;
num < 0 ? $("pic").style.top = num + "px" : clearInterval(timer);
},30)

}

//没有遮罩层的父节点让它停止定时器
$("picUp").parentNode.onmouseout = function(){
clearInterval(timer);
}

</script>