JS实现长图上下滚动效果
时间：2021-07-17 08:10:20|栏目：JavaScript代码|点击： 次
本文实例为大家分享了JS实现长图上下滚动的具体代码，供大家参考，具体内容如下
案例描述
将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半部分时，图片向下滑直到到达图片的底部停止；当鼠标置于盒子的下半部分时，图片向上滑直到到达图片的顶部停止。
案例图示
HTML
<div id="box"> <img id="pic" src="./program1/images/1.jpg" alt=""> <div id="top"></div> <div id="bottom"></div>
CSS
CSS不作过多解释，详解请看注释部分
//通用样式
* {
margin: 0;
padding: 0;
}
#box {
width: 750px;
height: 200px;
border: 1px solid #000;
margin: 200px auto;
overflow: hidden; /*图片溢出部分隐藏*/
position: relative; /*子绝父相*/
}
#pic {
position: absolute;
left: 0;
right: 0;
}
#top {
width: 100%;
height: 50%;
position: absolute; /*子绝父相*/
left: 0;
cursor: pointer; /*鼠标*/
/* 顶部对齐 */
top:0;
}
#bottom {
width: 100%;
height: 50%;
position: absolute; /*子绝父相*/
left: 0;
cursor: pointer;
/* 底部对齐 */
bottom: 0;
}
</style>
JS核心代码
JS详解----监听鼠标进入事件（以盒子上半部分为例）
鼠标停留在盒子上半部分时，使用onmouseover事件。首先要清除定时器，否则可能会出现定时器重叠现象；再设置定时器，定时器中的num就是改变图片的top属性以达到图片向上滑动的效果。if语句中的条件是为了达到图片到达底部时停止向上滑的目的。（盒子下半部分类似）
top.onmouseover = function(){
// 改变pic中的top
// 清除定时器
// alert(0);
clearInterval(intervalId);
// 设置定时器
intervalId = setInterval(function(){
if(num > -600){
num -= 10;
pic.style.top = num + "px";
}
},20);
JS详解----监听鼠标移出事件（以盒子上半部分为例）
鼠标移出时使用onmouseout事件，清除定时器。（盒子下半部分类似）
top.onmouseout = function() {
clearInterval(intervalId);
}
JS全部代码展示
<script>
window.onload = function() {
// 获取标签
var box = document.getElementById('box');
var pic = document.getElementById('pic');
var top = document.getElementById('top');
var bottom = document.getElementById('bottom');
var intervalId, num = 0;
// 鼠标进入上半部分
top.onmouseover = function(){
// 改变pic中的top
// 清除定时器
// alert(0);
clearInterval(intervalId);
// 设置定时器
intervalId = setInterval(function(){
if(num > -600){
num -= 10;
pic.style.top = num + "px";
}
},20);
};
// 鼠标移出上半部分
top.onmouseout = function() {
clearInterval(intervalId);
}
// 鼠标进入下半部分
bottom.onmouseover = function(){
// 改变pic中的top
// 清除定时器
// alert(0);
clearInterval(intervalId);
// 设置定时器
intervalId = setInterval(function(){
if(num < 0){
num += 10;
pic.style.top = num + "px";
}
},20);
};
// 鼠标移出下半部分
bottom.onmouseout = function() {
clearInterval(intervalId);
};
}
</script>
上一篇：javascript遍历json对象的key和任意js对象属性实例
栏 目：JavaScript代码
本文标题：JS实现长图上下滚动效果
本文地址：http://www.codeinn.net/misctech/158396.html
