JS实现长图上下滚动效果

<div id="box">
 <img id="pic" src="/UploadFiles/2021-04-02/1.jpg">

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>


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