同一页面可次调用的jquery文字无缝滚动插件代码

来源:互联网 时间:1970-01-01

文字滚动我们只要的搜索可以有千万个这个的实例,但是同一页面可以多次调用并且无缝滚动的效果不多,下面我推荐一款不错的同一页面可次调用的jquery文字无缝滚动插件应用实例,各位朋友可参考。

jquery文字无缝滚动插件,仅适合于文字,因为此效果是用不断的将第一行插入到最后来实现的,如果是比较大的内容块,会比较卡。

源代码如下:

  

 代码如下 复制代码

(function($) {

  $.fn.myScroll = function(options) {

    //默认配置

    var defaults = {

      speed: 40,//滚动速度,值越大速度越慢

      rowHeight: 24 //每行的高度

    };

    var opts = $.extend({}, defaults, options),

        intId = [];

    function marquee(obj, step) {

      obj.find("ul").animate({

        marginTop: '-=1'

      }, 0, function() {

        var s = Math.abs(parseInt($(this).css("margin-top")));

        if (s >= step) {          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }

    this.each(function(i) {
      var sh = opts["rowHeight"],
          speed = opts["speed"],
          _this = $(this);

      intId[i] = setInterval(function() {
        marquee(_this, sh);
      }, speed);

      _this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(function() {
          marquee(_this, sh);
        }, speed);
      });

    });

  }
})(jQuery);


html结构如下:

 代码如下 复制代码

<div class="demo">
<ul>
  <li><a title="仿webqq做的一个webos桌面效果" href="#">仿webqq做的一个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="#">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery实现鼠标中键滚轮效果" href="#">使用jquery实现鼠标中键滚轮效果</a></li>
  <li><a title="如何成为网页设计专家" href="#">如何成为网页设计专家</a></li>
  <li><a title="javascript--求数组的最大最小值" href="#">javascript--求数组的最大最小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="#">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也可以支持css3" href="#">使用css3-PIE让ie也可以支持css3</a></li>
</ul>
</div>


调用方法:

 代码如下 复制代码

$(function(){
   $("div.demo").myScroll({
   speed:40,
   rowHeight:24 //行高,即li的高度,如果有margin/padding,也在计算之中
  });
});

 代码如下 复制代码

<!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 type="text/css">
<!--
body,td,th {
 font-size: 12px;
}
a {
 font-size: 12px;
 color: #09C;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #09C;
}
a:hover {
 text-decoration: underline;
 color: #930;
}
a:active {
 text-decoration: none;
 color: #09C;
}
*{ margin:0; padding:0;}
.header{
 height:60px;
 background-color:#666;
 color:#FFF;
 }
.header h1{
 padding:6px 0;
 } 
.demo{
 width:300px;
 height:100px;
 overflow:hidden;
 float:left;
 margin:100px 0 0 100px;
 border:1px solid #09F;
 padding:10px;
 }
.demo ul{
   list-style:none;
   height:auto;
}
.demo ul li{
 height:24px;
 line-height:24px;
 }

-->
</style>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
   (function($) {
  $.fn.myScroll = function(options) {

    //默认配置
    var defaults = {
      speed: 40,
      //滚动速度,值越大速度越慢
      rowHeight: 24 //每行的高度
    };

    var opts = $.extend({}, defaults, options),
        intId = [];

    function marquee(obj, step) {
      obj.find("ul").animate({
        marginTop: '-=1'
      }, 0, function() {
        var s = Math.abs(parseInt($(this).css("margin-top")));
        if (s >= step) {
          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }


    this.each(function(i) {
      var sh = opts["rowHeight"],
          speed = opts["speed"],
          _this = $(this);

      intId[i] = setInterval(function() {
        marquee(_this, sh);
      }, speed);

      _this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(function() {
          marquee(_this, sh);
        }, speed);
      });

    });

  }
})(jQuery);
  
   $(function(){
     $("div.demo").myScroll({
          speed:40,
          rowHeight:24
          });
     });
</script> 

 
</head>
<body>
<div class="header">
<h1>jquery文字无缝滚动插件</h1>
</div>
<div class="demo">
<ul>
  <li><a title="仿webqq做的一个webos桌面效果" href="">仿webqq做的一个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery实现鼠标中键滚轮效果" href="">使用jquery实现鼠标中键滚轮效果</a></li>
  <li><a title="如何成为网页设计专家" href="">如何成为网页设计专家</a></li>
  <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大最小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也可以支持css3" href="">使用css3-PIE让ie也可以支持css3</a></li>
</ul>
</div>


<div class="demo">
<ul>
  <li><a title="仿webqq做的一个webos桌面效果" href="">仿webqq做的一个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery实现鼠标中键滚轮效果" href="">使用jquery实现鼠标中键滚轮效果</a></li>
  <li><a title="如何成为网页设计专家" href="">如何成为网页设计专家</a></li>
  <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大最小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也可以支持css3" href="">使用css3-PIE让ie也可以支持css3</a></li>
</ul>
</div>
</body>
</html>




相关阅读:
Top