Of Stack

jquery plug in text intermittent automatic scroll up effect code

  • 2021-01-06 00:27:13
  • OfStack

This article describes the jquery plugin for automatic text intermittent scroll up effect code. To share for your reference, the details are as follows:

This plugin aims to implement the current popular text intermittent scroll up effect. When the mouse moves over the text, the scroll up will stop, and when the mouse leaves, the scroll up will 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> The text scrolls up intermittently </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 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>02 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>03 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>04 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>05 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>06 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>07 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>08 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
  <li>09 This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 </ul>
</div>
<script>
/*
* textSlider 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
 $.fn.textSlider = function(options){
   var defaults = { // Initialization parameter 
      scrollHeight:25,
      line:1,
      speed:'normal',
      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++){ // only for It can only be set after the loop 1 Number of rows per scroll 
           $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>

Readers who are interested in more jQuery related content can check out the special features of this site: jQuery Drag and drop effects and techniques summary, jQuery extension techniques summary, jQuery common classic effects summary, jQuery animation and effects usage summary, jquery selector method summary and jQuery common plugins and usage summary

I hope this article is helpful to jQuery program design.

Related articles: