消息框左右滚动

最新推荐文章于 2024-03-22 10:53:36 发布

乐夫天命兮

最新推荐文章于 2024-03-22 10:53:36 发布

阅读量188

点赞数

分类专栏： vue日常存档

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/118721520

版权

Vue.js 滚动效果渐变边框鼠标事件 DOM操作

关键词由CSDN通过智能技术生成

vue日常存档专栏收录该内容

47 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="box-outer">
        <div class="before" v-show="isShow"></div>
        <div class="after" v-show="isShow"></div>
        <div
          ref="sbox"
          class="box vue-loop-scroll-box"
          @mouseenter="stopScroll"
          @mouseleave="leaveScroll"
        >
          <div ref="sitem1" class="vue-loop-scroll-item1">
            <span>
              111111111111111111
            </span>
            <span>
              2222222
            </span>
            <span>
              3333333
            </span>
          </div>
          <div class="vue-loop-scroll-item2"></div>
        </div>
      </div>
    </div>
  </body>
</html>
<style>
  .box-outer {
    position: relative;
    width: 500px;
    overflow: hidden;
    white-space: nowrap;
    background-color: #e5e5e5;
  }
  .box {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }
  .box div{display: inline-block;}
  .box-outer .before {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    content: "";
    width: 100px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.1)
    );
  }
  .box-outer .after {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    width: 100px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 1)
    );
  }

  ul {
    display: inline-block;
  }
</style>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      speed: 50,
      index: 0,
      isShow: false,
    },
    mounted() {
      this.startScroll();
    },
    methods: {
      //开始滚动
      startScroll() {
        this.$nextTick((res) => {
          var sbox = document.getElementsByClassName("vue-loop-scroll-box")[
            this.index
          ];

          var sitem1 = document.getElementsByClassName("vue-loop-scroll-item1")[
            this.index
          ];
          //文字太少的时候不滚动
          if (this.$refs.sbox.offsetWidth > this.$refs.sitem1.offsetWidth) {
            this.isShow = false;
            return;
          }
          this.isShow = true;
          var sitem2 = document.getElementsByClassName("vue-loop-scroll-item2")[
            this.index
          ];
          sitem2.innerHTML = sitem1.innerHTML;
          var that = this;
          this.timer1 = setInterval(function () {
            that.scrollLeft(sbox, sitem1);
          }, this.speed);
        });
      },
      //向左滚动
      scrollLeft(sbox, sitem1) {
        if (sbox.scrollLeft >= sitem1.offsetWidth) {
          sbox.scrollLeft = 0;
        } else {
          sbox.scrollLeft++;
        }
      },
      //鼠标移入停止
      stopScroll() {
        clearInterval(this.timer1);
      },

      //鼠标移开
      leaveScroll() {
        this.startScroll();
      },
    },
  });
</script>