码迷,mamicode.com
首页 > 其他好文 > 详细

vue文字跑马灯效果

时间:2018-08-13 13:56:37      阅读:849      评论:0      收藏:0      [点我收藏+]

标签:间隔   boot   order   pix   position   init   fun   jquer   you   

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文字跑马灯效果

标签:间隔   boot   order   pix   position   init   fun   jquer   you   

原文地址:https://www.cnblogs.com/SimonHu1993/p/9467120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!