jquery plug-in text intermittent automatic scrolling up effect code

jquery plug-in text intermittent automatic scrolling up effect code_jquery

PHP中文网

Release： 2016-05-16 15:13:31

Original

1311 people have browsed it

The example in this article describes the jquery plug-in’s text intermittent automatic scrolling up effect code. Share it with everyone for your reference, the details are as follows:

This plug-in is designed to implement the currently popular intermittent upward scrolling effect of text. When the mouse moves to the text, the upward scrolling will stop. When the mouse leaves, the upward scrolling will stop. Scroll to continue. The overall code is as follows:

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

Copy after login

The above is the content of the jquery plug-in's text intermittent automatic scrolling up effect code_jquery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!