zoukankan      html  css  js  c++  java
  • vue消息无缝滚动

    HTML:

    <div class="marquee">

      <ul class="nameList" :class="{anim:animate==true}">
        <li v-for='(item,index) in marqueeList' :key="index">{{item.name}}</li>

      </ul>
    </div>

    script:

    export default {
      data() {
        return {
          animate: false,
          marqueeList: [ 

            {name: "抖音"},

            {name: "虎牙"},

            {name: "淘宝"},

            {name: "京东"},
            {name: "微博"},

            {name: "微信"}
          ]

        };

      },

      created() {
        if (this.marqueeList.length > 2) {
          setInterval(this.showMarquee, 2000);
        }
      }, 

      methods: {
        showMarquee() {
          this.animate = true;
          setTimeout(() => {
            this.marqueeList.push(this.marqueeList[0]);
            this.marqueeList.shift();
            this.animate = false;// 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了

          }, 1000);
        },

      }

    }

    style:

    .marquee
       300px;
      height: 60px;
      line-height: 30px;
      overflow: hidden;
      padding-left: 30px;
      border: 1px solid black;
      transition: all .5s;
    .anim
      transition: all 1s;
      margin-top: -30px;
    .nameList li
      list-style: none;
      line-height: 30px;
      height: 30px;

  • 相关阅读:
    结对项目进度1
    学期总结之数学建模软件——LINGO和R
    四则运算计算程序(完成)
    学期总结之数学建模软件——编译原理
    图形学算法之NichollLeeNicholl算法
    学期总结之3D游戏开发
    《构建之法》读后感
    四则运算计算程序(初步)
    结对项目进度2
    Spring IOC原理解析
  • 原文地址:https://www.cnblogs.com/CMing/p/9817228.html
Copyright © 2011-2022 走看看