How to implement JQuery text seamless scrolling effect-JS Tutorial-php.cn

How to implement JQuery text seamless scrolling effect

小云云

Release： 2018-01-23 10:33:09

Original

1751 people have browsed it

This article mainly introduces the sample code for JQuery to achieve seamless text scrolling effect (Marquee plug-in). It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Recommend a JQuery seamless text scrolling effect, and you can also scroll pictures, also called a marquee effect.

This jquery plug-in, relying on the jquery library, can achieve various scrolling effects and make HTML code comply with W3C standards.

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>

Copy after login

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

Copy after login

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前端开发</a> [2011-10-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank"> 架构设计</a> [2011-09-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=157" rel="external nofollow" target="_blank"> 系统运维</a> [2011-10-16]</li>   
</ul>

Copy after login

This plug-in provides many attribute options that you can configure and customize Appearance and effect.

{      
 yScroll: "top"    // 初始滚动方向 (还可以是"top" 或 "bottom")     
 showSpeed: 850    // 初始下拉速度     
 scrollSpeed: 12    // 滚动速度     
 pauseSpeed: 5000   // 滚动完到下一条的间隔时间     
 pauseOnHover: true  // 鼠标滑向文字时是否停止滚动     
 loop: -1       // 设置循环滚动次数 （-1为无限循环）     
 fxEasingShow: "swing" // 缓冲效果     
 fxEasingScroll: "linear" // 缓冲效果     
 cssShowing: "marquee-showing" //定义class      // 
 event handlers     
 init: null        // 初始调用函数     
 beforeshow: null      // 滚动前回调函数     
 show: null         // 当新的滚动内容显示时回调函数     
 aftershow: null      // 滚动完了回调函数 
}

Copy after login

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

Related recommendations:

JQuery’s marquee seamless scrolling plug-in implementation tutorial

##10 lines of JS simple method to achieve text seamless scrolling

Detailed examples of jQuery implementation of accordion menu, hierarchical menu, top menu, and seamless scrolling effect

The above is the detailed content of How to implement JQuery text seamless scrolling effect. For more information, please follow other related articles on the PHP Chinese website!