vue 点击按钮图片左右滑动

最新推荐文章于 2024-05-08 16:14:28 发布

yuan_9916

最新推荐文章于 2024-05-08 16:14:28 发布

阅读量1.6k

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_64743640/article/details/125322574

版权

HTML

// 添加ref 获取dom元素
<div class="four_lc" ref="_four_lc">
    // 添加ref 获取dom元素
    <img style="left: 0px;"src="lc.png" class="four_lc_img" ref="_four_lc_">
</div>
<div class="left" @click="btnLeft()">向左</div>
<div class="right" @click="btnRight()">向右</div>

CSS

// 父元素添加绝对定位
.four_lc {
      width: 100%;
      height: 123px;
      overflow: hidden;
      margin-top: 81px;
      position: relative;

     
}
// 子元素添加相对定位
 .four_lc_img {
        position: absolute;
}

vue

methods: {
    // 点击按钮 图片向左移动
    btnLeft() {
      // 获取图片
      let img = this.$refs._four_lc_
      // 点击图片向左移动
      if (img.offsetLeft <= -(img.offsetWidth - this.$refs._four_lc.offsetWidth)) {
        img.style.left = 0 + 'px'
      } else {
        img.style.left = img.offsetLeft - img.offsetWidth / 10 + 'px'
      }
      // 添加动效
      img.style.transition = 'all 0.5s'
    },

    // 点击按钮 图片向右移动
    btnRight() {
      // 获取图片
      let img = this.$refs._four_lc_
      //  图片向右
      if (img.offsetLeft >= 0) {
        img.style.left = -(img.offsetWidth - this.$refs._four_lc.offsetWidth) + 'px'
      } else {
        img.style.left = img.offsetLeft + img.offsetWidth / 10 + 'px'
      }

      img.style.transition = 'all 0.5s'
    },
  }