[jQuery plugin] 跑馬燈效果- jQuery.Marquee

想要用跑馬燈效果可以使用這一隻。

外掛網址: jQuery.Marquee

有 cdn 可以用

view plaincopy to clipboardprint

1. <script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js" type="text/javascript"></script>  

一些設定
allowCss3Support Force the usage of jQuery's animate method even if the target browser supports CSS3 animations. Default: true
css3easing Works when allowCss3Support is set to true. See here for full list. Default: 'linear'
easing Requires the jQuery easing plugin. Default: 'linear'
delayBeforeStart Time in milliseconds before the marquee starts animating. Default: 1000
direction Direction towards which the marquee will animate 'left' / 'right' / 'up' / 'down'. Default: 'left'. Todo: need to change this to ltr/rtl etc
duplicated Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container. Default: false
duration Duration in milliseconds in which you want your element to travel. Default: 5000.
speed Speed will override duration. Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
gap Gap in pixels between the tickers. Will work only when the duplicated option is set to true. Default: 20. Note: 20 means 20px so no need to use '20px' as the value.
pauseOnHover Pause the marquee on hover. If the browser supports CSS3 and allowCss3Support is set to true this will be done using CSS3. Otherwise this will be done using the jQuery Pause plugin. Default: false. See demo page for example.
pauseOnCycle On cycle, pause the marquee for delayBeforeStart milliseconds.
startVisible The marquee will be visible from the start if set to true.


使用方法

view plaincopy to clipboardprint

1. $('.marquee').marquee({   
2.     //duration in milliseconds of the marquee   
3.     duration: 15000,   
4.     //gap in pixels between the tickers   
5.     gap: 50,   
6.     //time in milliseconds before the marquee will start animating   
7.     delayBeforeStart: 0,   
8.     //'left' or 'right'   
9.     direction: 'left',   
10.     //true or false - should the marquee be duplicated to show an effect of continues flow   
11.     duplicated: true  
12. });