Of Stack

jQuery plug in to achieve seamless text scroll up effect code

  • 2021-01-06 00:26:50
  • OfStack

This article describes the jQuery plug-in to achieve seamless text scroll up code. To share for your reference, the details are as follows:

This plugin aims to achieve the current popular seamless scroll up effect, scroll up stops when the mouse moves over the text, and scroll up continues when the mouse moves away. 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> Seamless scrolling up </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: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> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 <li> This is a 1 A seamless scrolling up effect, is my first 1 Write a plug-in like this </li>
 </ul>
</div>
<script>
/*
* scrollTop 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
 $.fn.scrollTop = function(options){
  var defaults = {
   speed:30
   }
  var opts = $.extend(defaults,options);
  this.each(function(){
   var $timer;
   var scroll_top=0;
   var obj = $(this);
   var $height = obj.find("ul").height();
   obj.find("ul").clone().appendTo(obj);
   obj.hover(function(){
    clearInterval($timer);
    },function(){
     $timer = setInterval(function(){
      scroll_top++;
      if(scroll_top > $height){
       scroll_top = 0;
      }
      obj.find("ul").first().css("margin-top",-scroll_top);
    },opts.speed);
    }).trigger("mouseleave");
   })
  }
 })(jQuery)
</script>
<script>
$(function(){
 $(".box").scrollTop({
  speed:30 // The greater the numerical   The slower speed 
  });
})
</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: