recherche

Maison  >  Article  >  interface Web  >  texte du plug-in jquery défilement automatique intermittent vers le haut effet code_jquery

texte du plug-in jquery défilement automatique intermittent vers le haut effet code_jquery

PHP中文网
PHP中文网original
2016-05-16 15:13:311317parcourir

L'exemple de cet article décrit le code d'effet de défilement automatique intermittent du texte du plug-in jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ce plug-in est conçu pour implémenter l'effet de défilement ascendant intermittent actuellement populaire du texte. Lorsque la souris se déplace vers le texte, le défilement vers le haut se produit. arrêter Lorsque la souris quitte, le défilement vers le haut s'arrête. Faites défiler pour continuer. Le code global est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字间歇向上滚动</title>
<style>
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:5px 5px 10px;overflow:hidden;}
.box ul li{line-height:25px;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<div class="box">
 <ul>
  <li>01这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>02这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>03这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>04这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>05这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>06这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>07这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>08这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
  <li>09这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 </ul>
</div>
<script>
/*
* textSlider 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
 $.fn.textSlider = function(options){
   var defaults = { //初始化参数
      scrollHeight:25,
      line:1,
      speed:&#39;normal&#39;,
      timer:2000
   };
   var opts = $.extend(defaults,options);
   this.each(function(){
     var timerID;
     var obj = $(this);
     var $ul = obj.children("ul");
     var $height = $ul.find("li").height();
     var $Upheight = 0-opts.line*$height;
     obj.hover(function(){
       clearInterval(timerID);
     },function(){
       timerID = setInterval(moveUp,opts.timer);
       });
     function moveUp(){
       $ul.animate({"margin-top":$Upheight},opts.speed,function(){
          for(i=0;i<opts.line;i++){ //只有for循环了才可以设置一次滚动的行数
           $ul.find("li:first").appendTo($ul);
          }
         $ul.css("margin-top",0);
       });
     };
     timerID = setInterval(moveUp,opts.timer);
     });
   };
})(jQuery)
</script>
<script>
$(function(){
  $(".box").textSlider({
    line:2
    });
  })
</script>
</body>
</html>

Ce qui précède est le contenu du texte du plug-in jquery, effet de défilement automatique intermittent code_jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. php.cn) !




Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente la fonction de saisie semi-automatique du champ de recherche (1)_javascript skillsArticle suivant：JavaScript implémente la fonction de saisie semi-automatique du champ de recherche (1)_javascript skills

Articles Liés

Voir plus