Comment implémenter l'effet de défilement transparent du texte JQuery

Cet article présente principalement l'exemple de code pour JQuery pour obtenir un effet de défilement de texte transparent (plug-in Marquee). Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Recommandez un effet de défilement de texte transparent JQuery, et vous pouvez également faire défiler des images, également appelé effet de sélection.

Ce plug-in jquery, s'appuyant sur la bibliothèque jquery, peut réaliser divers effets de défilement et rendre le code HTML conforme aux normes du W3C.

La méthode d'utilisation est la suivante :

1. Chargez 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. Ajoutez des styles CSS.

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. Le code HTML est le suivant :

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

Le plug-in fournit de nombreuses options d'attributs, vous pouvez configurer des looks et des effets personnalisés.

{      
 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      // 滚动完了回调函数 
}

jquery.marquee.js peut être téléchargé depuis le site officiel : http://www.givainc.com/labs/marquee_jquery_plugin.htm

Recommandations associées :

Tutoriel d'implémentation du plug-in de défilement transparent jQuery chapiteau

10 lignes de méthode simple JS pour obtenir un résultat transparent défilement de texte

Exemple détaillé de la façon dont jQuery implémente le menu accordéon, le menu hiérarchique, le menu supérieur et l'effet de défilement transparent

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!