vue文字跑马灯效果

Posted 2020-12-29 simonhu1993

https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js

兼容vue

$("#demo4").marquee({
    direction: "up",
    duration: 2000,       // 滚动速度         ,
    pauseSpeed: 500,      // 滚动完到下一条的间隔时间         ,
    pauseOnHover: true,    // 鼠标滑向文字时是否停止滚动         ,
    loop: -1 ,             //设置循环滚动次数 （-1为无限循环）
});

默认配置：

 // Public: plugin defaults options
    $.fn.marquee.defaults = {
        // If you wish to always animate using jQuery
        allowCss3Support: true,
        // works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
        css3easing: ‘linear‘,
        // requires jQuery easing plugin. Default is ‘linear‘
        easing: ‘linear‘,
        // pause time before the next animation turn in milliseconds
        delayBeforeStart: 1000,
        // ‘left‘, ‘right‘, ‘up‘ or ‘down‘
        direction: ‘left‘,
        // true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: false,
        // duration in milliseconds of the marquee in milliseconds
        duration: 5000,
        // gap in pixels between the tickers
        gap: 20,
        // on cycle pause the marquee
        pauseOnCycle: false,
        // on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
        pauseOnHover: false,
        // the marquee is visible initially positioned next to the border towards it will be moving
        startVisible: false
    };