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

JQuery

1个成员

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

发表于 2017-01-24 • 3962 次查看

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

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

源代码如下：

代码如下

复制代码

(function($) {
$.fn.myScroll = function(options) {

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

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

    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 = [];

    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>