search

Home >Web Front-end >JS Tutorial >jQuery plug-in to achieve seamless upward text scrolling effect code_jquery

jQuery plug-in to achieve seamless upward text scrolling effect code_jquery

WBOY
WBOYOriginal
2016-05-16 15:13:261340browse

The example in this article describes the code of the jQuery plug-in to achieve the seamless upward scrolling effect of text. Share it with everyone for your reference, the details are as follows:

This plug-in is designed to implement the currently popular seamless upward scrolling effect. When the mouse moves over the text, the upward scrolling will stop, and when the mouse leaves, the upward scrolling 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>无缝向上滚动</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这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>02这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
 <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</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 //数值越大 速度越慢
  });
})
</script>
</body>
</html>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and skills summary", "jQuery extension skills summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The jQuery plug-in implements table interlaced color change and mouse-over highlighting effect code_jqueryNext article：The jQuery plug-in implements table interlaced color change and mouse-over highlighting effect code_jquery

Related articles

See more