首页 > 代码库 > Js跑马灯效果 && 在Vue中使用

Js跑马灯效果 && 在Vue中使用

DEMO:

<!DOCTYPE html>
<html>

<head>
  <title>滚动播报</title>
  <meta charset="UTF-8">
  <style>
    .content {
      height: 60px;
      background-color: #2c2c34;
      overflow: hidden;
    }

    .content ul {
      white-space: nowrap;
    }

    .content ul li {
      position: relative;
      font-size: 14px;
      vertical-align: middle;
      line-height: 35px;
      padding: 0 8px;
      white-space: nowrap;
      display: inline-block;
      color: #fff
    }

    #scrollBox {
      overflow: hidden;
    }

    #scrollBox .scrollWrap {
      width: 500%
    }

    .scrollCont {
      float: left;
    }
  </style>
</head>

<body>
  <div class="content">
    <ul>
      <div id="scrollBox">
        <div class="scrollWrap">
          <div id="scrollContOne" class="scrollCont">
            <li>我是第一条数据</li>
            <li>我是第二条数据</li>
            <li>我是第三条数据</li>
            <li>我是第四条数据</li>
            <li>我是第五条数据</li>
            <li>我是第六条数据</li>
            <li>我是第七条数据</li>
            <li>我是第八条数据</li>
          </div>
          <div id="scrollContTwo" class="scrollCont"></div>
        </div>
      </div>
    </ul>
  </div>

  <script>
    let speed = 40

    let scrollBox = document.getElementById("scrollBox");

    let scrollContOne = document.getElementById("scrollContOne");

    let scrollContTwo = document.getElementById("scrollContTwo");

    scrollContTwo.innerHTML = scrollContOne.innerHTML;

    scrollBox.scrollLeft = 0;

    function scrollRadio() {

      if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

        scrollBox.scrollLeft -= scrollContOne.offsetWidth

      } else {

        scrollBox.scrollLeft += 2;

      }

    }

    let MyScrollRadio = setInterval(scrollRadio, speed);

    scrollBox.onmouseover = function() {

      clearInterval(MyScrollRadio)

    };

    scrollBox.onmouseout = function() {

      MyScrollRadio = setInterval(scrollRadio, speed)

    };

  </script>

</body>

</html>

 

在Vue中使用:

<template>

  <div class="content">

    <ul>

      <div id="scrollBox">

        <div class="scrollWrap">

          <div id="scrollContOne" class="scrollCont">

            <li v-for="item in items">

              <a href="http://www.mamicode.com/{{item}" target="_blank"></a>

            </li>

          </div>

          <div id="scrollContTwo" class="scrollCont"></div>

        </div>

      </div>

    </ul>

  </div>

</template>

<style scoped>

  .content {

    height: 60px;

    background-color: #2c2c34;

    overflow: hidden;

  }

  .content ul {

    white-space: nowrap;

  }

  .content ul li {

    position: relative;

    font-size: 14px;

    vertical-align: middle;

    line-height: 35px;

    padding: 0 8px;

    white-space: nowrap;

    display: inline-block;

  }

  .content ul li a {

    text-decoration: none;

    color:#fff;
  }

  #scrollBox {

    overflow: hidden;

    margin-left: 36px;

  }

  #scrollBox .scrollWrap {

    width: 500%

  }

  .scrollCont {

    float: left;

  }

</style>

<script>

export default {

  data: () => ({

    canScrollTimer: 0

  }),

  methods: {

    run() {

      let speed = 40;

      let scrollBox = document.getElementById("scrollBox");

      let scrollContOne = document.getElementById("scrollContOne");

      let scrollContTwo = document.getElementById("scrollContTwo");

      scrollContTwo.innerHTML = scrollContOne.innerHTML;

      scrollBox.scrollLeft = 0;

      function scrollRadio() {

        if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

          scrollBox.scrollLeft -= scrollContOne.offsetWidth

        } else {

          scrollBox.scrollLeft += 2;

        }
      }

      let MyScrollRadio = setInterval(scrollRadio, speed);

      scrollBox.onmouseover = function() {

        clearInterval(MyScrollRadio)

      };

      scrollBox.onmouseout = function() {

        MyScrollRadio = setInterval(scrollRadio, speed)

      };

    },

    canScroll() {

      let innerHTML = document.getElementById("scrollContOne").innerHTML;

      if (innerHTML != null && innerHTML != ‘‘ && innerHTML.trim().length != 0) {

        clearInterval(this.canScrollTimer);

        this.run();

      } else {

        let self = this;

        this.canScrollTimer = setInterval(function() {

          self.canScroll()

        }, 1000);

      }

    }

  },

  ready() {

    this.canScroll();

  }

}

</script>

Js跑马灯效果 && 在Vue中使用