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代码示例
Feb 15 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
教你部署vue项目到docker
Apr 05 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
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python list转dict示例分享
2014/01/28 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python通过http下载文件的方法详解
2019/07/26 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
党员批评与自我批评
2014/02/12 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
地震捐款简报
2015/07/21 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript