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获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
关于element的表单组件整理笔记
Feb 05 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
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
zookeeper python接口实例详解
2018/01/18 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python3处理HTTP请求的实例
2018/05/10 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
电子银行营销方案
2014/02/22 职场文书
班长竞选演讲稿
2014/04/24 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
医院员工辞职信范文
2015/05/12 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python