Vue realizes the effect of list marquee

This article has shared the specific code for Vue implementation list marquee effect for your reference. The specific content is as follows

In Vue file:

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
    <li v-for ="item in gzdtList" >
        <a :href="" rel="external nofollow"  target="_blank" :title="" >
            <span class="GZDTtitle">
                {{ | ellipsis}}
            </span>
        </a>
        <span class="right date">{{}}</span>
    </li>
</ul>

js：

&lt;script&gt;
    export default{
    data:function(){
        return {
            timeId:null,
            // Maroon light            animate:false,
        };
    },
    filters: {},
    methods:{
        // Maroon light        scroll(){
             =true;// Because css3 transition animation needs to be added when the message is scrolling up, true needs to be set here            setTimeout(()=&gt;{    //  The es6 arrow function is directly used here, which eliminates the problem of handling this pointing offset, and the code is much simplified than before.                ([0]); // Add the first element of the array to the array's                (); //Delete the first element of the array                 = false // When margin-top is 0, cancel the transition animation to achieve seamless scrolling              }, 1000)
        },
        
        //Hoom the mouse and stop scrolling        stopScroll () {
            var target = this.$refs.con1;
            clearInterval()
        },
        
        // Mouse away, then scroll        startScroll () {
            var target = this.$refs.con1;
             = setInterval(,1500);  // Set the sliding speed        },
    },
    mounted: function() {
        ();
        =setInterval(,1500);
    },
}
&lt;/script&gt;

css：

/*Marion **/
&lt;style&gt;
    #box{
        height: 238px;
        overflow: hidden;
        border: 1px solid #ffffff;
        margin-top: 0px;
    } 
    .anim{
        transition: all 2s;
    }
    
    #con1 li{
        list-style: none;
        line-height: 35px;
        height: 35px;
    }
&lt;/style&gt;

During the operation, I found that the revolving light title can be scrolled and changed, but the content of the corresponding span tag remains unchanged. It may be because the browser version is too high. You can change the browser or lower the browser version to try.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.