本次要实现的效果是，在一个盒子里面有一张长图，只显示了一部分，为方便用户浏览，当鼠标移入时，图片开始滚动，将盒子分成上下两部分，当鼠标移入上部分时，图片向上滚动，当鼠标移入下部分时，图片向下滚动。
为了实现上面的效果，我们需要在html中进行简单的布局：
<div id="box">
<img id="pic" src="images/timg.jpg" alt="">
<span id="to_top"></span>
<span id="to_bottom"></span>
</div>
其中div为外层固定大小的大盒子，因为图片大于盒子，所以需要将盒子设置超出隐藏，图片上下滚动式通过定位实现的，需要将图片设置为相对父级定位，通过两个span来判断鼠标移入时的位置是在上半部分还是下半部分，所以两个span均为盒子的一半，分别位于盒子的上半部分和下半部分。
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
}
#box{
width: 750px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#pic{
position: absolute;
left: 0;
top: 0;
}
#to_top, #to_bottom{
width: 100%;
height: 50%;
/*background-color: greenyellow;*/
position: absolute;
left: 0;
cursor: pointer;
}
#to_top{
top: 0;
}
#to_bottom{
bottom: 0;
}
</style>
接下来开始写相应的事件，首先需要获取相应的元素标签
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
然后监听鼠标事件，并用定时器实现动画效果。
to_top.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
to_bottom.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
box.onmouseout = function () {
clearInterval(timer);
}
现在基本可以实现图片相应鼠标，进行上下滑动了，但还是有问题，首先是定时器累加，其次是图片无限制的上下滑动，针对这两个问题，我们需要在每次鼠标进入时清除定时器，另外就是判断滚动的临界值：
- 图片向下滚动时，顶部距离父级元素的位置不能大于0，即初始的默认值位置
- 图片向上滚动时，顶部距离父级元素的位置不能小于图片长度与盒子高度的差值
根据上面的两点，重新整理上面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
}
#box{
width: 750px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#pic{
position: absolute;
left: 0;
top: 0;
}
#to_top, #to_bottom{
width: 100%;
height: 50%;
/*background-color: greenyellow;*/
position: absolute;
left: 0;
cursor: pointer;
}
#to_top{
top: 0;
}
#to_bottom{
bottom: 0;
}
</style>
</head>
<body>
<div id="box">
<img id="pic" src="images/timg.jpg" alt="">
<span id="to_top"></span>
<span id="to_bottom"></span>
</div>
<script>
window.onload = function () {
// 1. 获取标签
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
var timer = null, num = 0;
// 2. 监听鼠标事件
to_top.onmouseover = function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 设置定时器
timer = setInterval(function () {
// 步长
num -= 10;
// 判断
if(num >= -2466){
pic.style.top = num + ‘px‘;
}else {
clearInterval(timer);
}
}, 20);
};
to_bottom.onmouseover = function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 设置定时器
timer = setInterval(function () {
// 步长
num += 10;
// 判断
if(num <= 0){
pic.style.top = num + ‘px‘;
}else {
clearInterval(timer);
}
}, 20);
};
box.onmouseout = function () {
// 清除定时器
clearInterval(timer);
}
}
</script>
</body>
</html>
完整代码下载链接：点这里
原文地址：https://www.cnblogs.com/yuyujuan/p/9539245.html
时间： 2024-08-03 13:29:59