持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

实现效果

实现思路

完成基本布局
绑定事件
完成事件逻辑

基本布局

想完成鼠标在上方图片向上滚动，鼠标在图片下方图片向下滚动，其实只需要用两个透明div绝对定位到图片的盒子就行，然后绑定的事件都绑定在这两个盒子上即可。

绑定事件

需要给上面和下面盒子都绑定鼠标移入mouseover和鼠标移出事件mouseout

事件逻辑

事件逻辑分为上方盒子和下方盒子。首先是上方盒子的mouseover事件：我们需要准备一个step变量来表示滑动的速度。然后触发事件后开启定时器。在定时器进行图片位置变化。这里要判断临界值，就是到底了不能滑了。step要大于等于图片盒子的高度减去图片的高度才能继续滚动。否则则清除定时器。其次是下方盒子的mouseover事件：代码跟上方盒子基本一样。只是判断的临界值是step要小于等于0则继续滚动。否则则清除定时器。 mouseout事件:清除定时器

完整代码

<template>
  <div class="img-content">
    <div class="img-bgc"></div>
    <div ref="imgBox" class="img-box">
      <img ref="img" class="big-img" src="http://i0.hdslb.com/bfs/article/d23d8adfec982452c590ac839e471918c4d4e08a.jpg" alt="" />
      <div class="top-box" @mouseover="onTopMouseOver" @mouseout="onMouseout"></div>
      <div class="bottom-box" @mouseover="onBottomMouseOver" @mouseout="onMouseout"></div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, getCurrentInstance } from "vue";
export default {
  components: {},
  setup() {
    const state = reactive({
      step: 0,
      timer: null
    });
    const { ctx } = getCurrentInstance()
    const onTopMouseOver = () => {
      if(state.timer){
        clearInterval(state.timer)
      }
      state.timer = setInterval(()=>{
        state.step -= 10
        if(state.step >=  ctx.$refs.imgBox.clientHeight - ctx.$refs.img.clientHeight){
          ctx.$refs.img.style.top = state.step + 'px'
        } else {
          clearInterval(state.timer)
        }
      },50)
    }
    const onBottomMouseOver = () => {
      if(state.timer){
        clearInterval(state.timer)
      }
      state.timer = setInterval(()=>{
        state.step += 10
        if(state.step <= 0){
          ctx.$refs.img.style.top = state.step + 'px'
        } else {
          clearInterval(state.timer)
        }
      },50)
    }
    const onMouseout = () => {
      clearInterval(state.timer)
    }
    return {
      ...toRefs(state),
      onTopMouseOver,
      onBottomMouseOver,
      onMouseout
    };
  },
};
</script>
<style lang="less" scoped>
.img-content {
  width:100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-bgc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('http://i0.hdslb.com/bfs/article/d23d8adfec982452c590ac839e471918c4d4e08a.jpg') no-repeat;
    background-size: 100% 100%;
    filter: blur(10px)
  }
  .img-box {
    width: 600px;
    height: 400px;
    border: 1px solid #ff6700;
    position: relative;
    overflow:hidden;
    .big-img {
      position: absolute;
      top: 0;
      left: 0;
    }
    .top-box {
      position: absolute;
      width: 100%;
      height: 50%;
      top: 0;
      cursor: pointer;
    }
    .bottom-box {
      position: absolute;
      width: 100%;
      height: 50%;
      bottom: 0;
      cursor: pointer;
    }
  }
}
</style>

总结

mouseover事件和mouseout事件使用
clearInterval的使用
图片滚动的判断

vue3实现长图滚动效果