JS实现长图上下滚动效果


Posted in Javascript onMarch 19, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
vuex的使用步骤
Jan 06 Vue.js
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
公证委托书
2014/08/01 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript