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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript实现日期格式转换
Dec 16 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
YII框架http缓存操作示例
2019/04/29 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
四年级语文教学反思
2014/02/05 职场文书
理发店策划方案
2014/06/05 职场文书
暑期培训班策划方案
2014/08/26 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS