首页 > 编程 > JavaScript > 正文

一个jquery实现的不错的多行文字图片滚动效果

2019-11-20 14:05:24
字体:
来源:转载
供稿:网友

今儿分享一个jquery实现多行滚动效果。

我看一些论坛网站上面,公告处用的较多。

代码如下

// 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(),line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度,数值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i

实例演示

代码如下

<div id="scrollDiv"><ul><li>我是jquery多行滚动条一</li><li>我是jquery多行滚动条二</li><li>我是jquery多行滚动条三</li><li>我是jquery多行滚动条四</li><li>我是jquery多行滚动条五</li><li>我是jquery多行滚动条六</li><li>我是jquery多行滚动条七</li><li>我是jquery多行滚动条八</li></ul></div>
<script type="text/javascript" src="http:/(www.VeVB.COm)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(),line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度,数值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginTop:0});});}_this.hover(function(){clearInterval(timerID);},function(){timerID=setInterval("scrollUp()",timer);}).mouseout();}})})(jQuery);$(document).ready(function(){$("#scrollDiv").Scroll({line:4,speed:1000,timer:2000});});</script>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表