1. 程式人生 > >vue文字跑馬燈效果

vue文字跑馬燈效果

star lis using obia dir ng- visible tick cdn

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
    };

vue文字跑馬燈效果