JQuery Implementation of Seamless Text Scroll Effect Sample Code of Marquee Plug in

Recommended 1 JQuery seamless text scrolling effect, but also can scroll pictures, also known as the lantern effect.

This jquery plug-in, relying on jquery library, can realize various scrolling effects, and make HTML code conform to W3C standard.

The usage method is as follows:

1. Load javascript.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.marquee.js"></script> 
<script type="text/javascript"> 
$(function(){   
$("#marquee").marquee({yScroll: "bottom"}); 
}); 
</script>

2. Add CSS style.

ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; } 
ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}

3. The HTML code is as follows:

<ul id="marquee" >    
<li><a href="http://www.bloomylife.com/?cat=153" rel="external nofollow" target="_blank"> WEB Front-end development </a> [2011-10-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank">  Architecture design </a> [2011-09-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=157" rel="external nofollow" target="_blank">  System operation and maintenance </a> [2011-10-16]</li>   
</ul>

The plug-in provides many attribute options, and you can configure custom looks and effects.

{      
 yScroll: "top"    //  Initial scrolling direction  ( It can also be "top"  Or  "bottom")     
 showSpeed: 850    //  Initial pull-down speed      
 scrollSpeed: 12    //  Rolling speed      
 pauseSpeed: 5000   //  Scroll to the bottom 1 Interval time of bars      
 pauseOnHover: true  //  Whether to stop scrolling when the mouse slides over the text      
 loop: -1       //  Set the number of cycles to scroll   ( -1 Is an infinite loop)      
 fxEasingShow: "swing" //  Buffering effect      
 fxEasingScroll: "linear" //  Buffering effect      
 cssShowing: "marquee-showing" // Definition class      // 
 event handlers     
 init: null        //  Initial call function      
 beforeshow: null      //  Callback function before scrolling      
 show: null         //  Callback function when new scroll content is displayed      
 aftershow: null      //  Finish scrolling the callback function  
}

jquery.marquee.js can be downloaded from the official website address: http://www.givainc.com/labs/marquee _ jquery _ plugin. htm