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 相关文章推荐
Javascript Request获取请求参数如何实现
Nov 28 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php中socket的用法详解
2014/10/24 PHP
php格式化金额函数分享
2015/02/02 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
网站上面有这种切换效果
2006/06/26 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Pandas 数据处理,数据清洗详解
2018/07/10 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
解释下面关于J2EE的名词
2013/11/15 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
超市创业计划书
2014/04/24 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
内勤岗位职责
2015/02/10 职场文书
大学生个人学习总结
2015/02/15 职场文书
学校党支部承诺书
2015/04/30 职场文书
投资合作意向书范本
2015/05/08 职场文书
实验室安全管理制度
2015/08/05 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server