html跑马灯(附源码效果图)

469 阅读1分钟

效果图:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>跑马灯效果</title>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <script src="https://www.jq22.com/jquery/vue.min.js"></script>
    <style>
      #scrolldiv {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 横向跑马灯 -->
      <div class="race_lamp" style="background: rgba(0,0,0,.5);color: #FFFFFF;font-size: 20px;">
        <marquee direction="left" loop=5 scrollamount=2>
          <span style="margin-right: 20px;" v-for="(item,index) in paomadeng_contents">{{item}}</span>
        </marquee>
      </div>
 
      <!-- 垂直跑马灯 -->
      <div id="scrolldiv" style="height: 200px;margin-top: 200px;overflow: hidden; background: #FF0000;">
        <div style="height: 15px;"></div>
        <ul id="scroll1" style="">
          <li style="line-height: 40px;" v-for="(item,idx) in getExchangeList">{{item}}</li>
        </ul>
        <div class="" style="height: 5px;"></div>
      </div>
 
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            msg: '',
            paomadeng_contents: ['1111111', '22222222', '3333333', '4444444', '55555', '666666', '777777', '888888'],
            getExchangeList: ['1111111啦啦啦啦啦', '22222222啦啦啦啦啦', '3333333啦啦啦啦啦', '44444啦啦啦啦啦44', '55啦啦啦啦啦555', '666啦啦啦啦啦666', '777啦啦啦啦啦777', '888啦啦啦啦啦888']
          }
        },
        methods: {
          rollDiv(t) {
            var scroll1 = document.getElementById("scroll1");
            var scrolldiv = document.getElementById("scrolldiv");
 
            //把内容重复复制,达到滚动不间断的效果
            scrolldiv.scrollTop = 0;
            var aaa = 0;
            setTimeout(() => {
              setInterval(() => {
                console.log(scrolldiv.scrollTop)
                console.log(scrolldiv.scrollHeight)
 
                if (scrolldiv.scrollTop < scrolldiv.scrollHeight - 195) {
                  scrolldiv.scrollTop = (scrolldiv.scrollTop + 1) + 40
                } else {
                  scrolldiv.scrollTop = 0;
                }
              }, t * 100);
            }, 1000)
          }
        },
        mounted() {
          this.rollDiv(this.getExchangeList.length * 3);
        }
      })
    </script>
  </body>
</html>