JS实现长图上下滚动效果
作者:前端coder 发布时间:2023-07-22 10:28:26
标签:js,滚动
本文实例为大家分享了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
0
投稿
猜你喜欢
- 在安装SQL Server 2000 ,安装进程自动地为“BUILTIN\Administrators&rdqu
- asp.net的dropdownlist控件为我们的web应用提供了许多用处,但有一点我总感觉不爽的就是在使用dropdownlist的事件
- 最近看了下go发送smtp邮件,于是总结一下简单示例 先上一个最简单的代码 (网上搂的代码改了改)package mainimport (
- 以前在工作中遇到一个问题,当表单发送的数据量很大时,就会报错。查阅MSDN了解到,原因是微软对用Request.Form()可接收的最大数据
- DreamWeaver 4的到来让大家兴奋吧?但是大家一定为DreamWeaver4里面的字体、文字大
- 本文实例讲述了php指定长度分割字符串str_split函数用法。分享给大家供大家参考,具体如下:示例1:$str = 'abcde
- 现在网页的设计都讲究整体统一风格,无论是网页的文字、图像,还是浏览器的滚动条都要求颜色和风
- 什么是索引拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为
- canal简介由阿里巴巴开源 github地址:https://github.com/alibaba/canalCanal是阿里巴巴开源的一
- 问题:数据库实际大小为600MB, 日志文件实际大小为33MB, 但日志文件占用空间为2.8GB!试了多种方式,SHIRNK DATABAS
- CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属
- 本文介绍了几乎所有关于对象的基本概念,什么是对象,如何创建对象,对象的属性的设置和读取,删除属性的方法,构造函数,对象原型,父类,子类,继承
- PHP htmlspecialchars() 函数实例把预定义的字符 "<" (小于)和 ">&q
- dssaa 问:求一个如奥运倒计时牌那样显示的倒计时程序突然想到这样的一个小程序,不知道能不能做,比如我要在我的主页上挂一个页面,上面只显示
- 开始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期
- Rotation滤镜可以使图片产生旋转效果,注意必须是IE5.5及IE6.0才能看到!方法如下:制作过程:一、准备图片1张。二、建立一个CS
- 看例子:运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
- OL是有序列表,但给list-style-type:decimal 定义,在IE中却显示的全是1,在火狐、Opera、谷歌、Safari等中
- 在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原
- 设计网站的同志背景主要有两种:学计算机、学艺术。基本上会写代码的不懂设计,会设计的不懂代码,这个格局似乎到今天还没变。某些学计算机的同学,有