JS实现长图上下滚动效果
作者:前端coder 时间:2023-07-22 10:28:26
本文实例为大家分享了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>
来源:https://blog.csdn.net/qq_45473786/article/details/104925949
标签:js,滚动
0
投稿
猜你喜欢
15个设计得最糟糕最变态的CAPTCHA验证码
2008-09-01 17:17:00
详解使用webpack构建多页面应用
2024-04-19 10:03:57
php数组索引与键值操作技巧实例分析
2023-07-01 21:39:10
探讨链接打开方式
2009-03-16 16:55:00
一文带你掌握Go语言中的文件读取操作
2024-05-21 10:24:57
使用 Python 破解压缩文件的密码的思路详解
2021-09-29 22:36:48
模式化窗口
2009-06-18 18:41:00
Python3如何对urllib和urllib2进行重构
2022-05-18 08:48:52
Python-split()函数实例用法讲解
2023-12-12 07:13:20
Dreamweaver MX 2004 制作树状菜单教程[动画]
2010-03-25 12:24:00
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2022-05-02 11:27:40
详解MySQL高可用MMM搭建方案及架构原理
2024-01-18 07:28:09
asp小偷程序原理和简单示例
2007-11-05 17:12:00
Python中Numpy的深拷贝和浅拷贝
2021-10-04 21:08:43
php curl选项列表(超详细)
2023-07-18 15:19:32
python多线程编程方式分析示例详解
2023-05-13 04:56:01
浅谈JavaScript中的parseInt()的妙用
2024-04-19 10:47:52
win8下python3.4安装和环境配置图文教程
2022-10-29 03:23:29
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2023-07-02 05:30:09
ASP ajax分页教程一
2011-04-10 10:51:00