JS实现长图上下滚动效果

 更新时间:2020年03月19日 10:55:40   作者:前端coder  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • js原生轮播图插件制作

    js原生轮播图插件制作

    这篇文章主要为大家详细介绍了js原生轮播图插件制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 深入理解Javascript闭包 新手版

    深入理解Javascript闭包 新手版

    最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。
    2010-12-12
  • JS实现点击li标签弹出对应的索引功能【案例】

    JS实现点击li标签弹出对应的索引功能【案例】

    这篇文章主要介绍了JS实现点击li标签弹出对应的索引功能,结合具体实例形式分析了javascript事件响应、元素遍历等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 使用plupload自定义参数实现多文件上传

    使用plupload自定义参数实现多文件上传

    这篇文章主要介绍了使用plupload自定义参数实现多文件上传的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • js模式化窗口问题![window.dialogArguments]

    js模式化窗口问题![window.dialogArguments]

    这篇文章主要介绍了js模式化窗口问题![window.dialogArguments],需要的朋友可以参考下
    2016-10-10
  • JavaScript自定义日期格式化函数详细解析

    JavaScript自定义日期格式化函数详细解析

    下面的一个例子就是以独立函数写出的JavaScript日期格式化函数,独立的format函数。回到格式化的这一知识点上,我们考查的是怎么实现的、运用了哪些原理
    2014-01-01
  • Javascript简单实现面向对象编程继承实例代码

    Javascript简单实现面向对象编程继承实例代码

    这篇文章主要介绍了Javascript简单实现面向对象编程继承实例代码,简单分析了面向对象程序设计的特征与继承的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Javascript之高级数组API的使用实例

    Javascript之高级数组API的使用实例

    今天小编就为大家分享一篇关于Javascript之高级数组API的使用实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • Add a Table to a Word Document

    Add a Table to a Word Document

    Add a Table to a Word Document...
    2007-06-06
  • Js 获取Gridview选中行的内容操作步骤

    Js 获取Gridview选中行的内容操作步骤

    本文将介绍一下Js获取Gridview选中行的内容的过程及步骤:取得gridview中获取选中行指定列的值.获取鼠标点击的元素等等,感兴趣的朋友可以了解下,或许对你学习js方面知识有所帮助
    2013-02-02

最新评论