jquery实现多行文字图片滚动效果

今儿分享一个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://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>

时间: 2024-08-10 18:42:19

jquery实现多行文字图片滚动效果的相关文章

jquery实现多行文字图片滚动效果示例代码_jquery

今儿分享一个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?pars

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

今儿分享一个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?pars

js 文字图片滚动效果

提示:您可以先修改部分代码再运行    黄金链简介       黄金链是北京奇金道网络科技有限公司旗下运营的专业互联网营销服务机构,是为广大站长提供互联网广告的平台.公司自2009年成立以来,受到了广大站长的信赖与支持,迅速发展成为中国最具商业价值的网络营销服务平台.       黄金链以客户需求为导向,以强大的营销服务团队,旨在为广大站长提供最优质的网络广告资源,达到最好的推广效果.       自运赢以来,黄金链秉承你好.我好.世界好的原则,赢得了广大客户和合作伙伴的信任,现已与国内最权威媒

jquery单行文字向上滚动效果示例

 这篇文章主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下 代码如下: <body>  <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div>    <div id="content" class="infocontent">  <div id="top" cla

jQuery实现行文字链接提示效果的方法

 这篇文章主要介绍了jQuery实现行文字链接提示效果的方法,实例分析了jQuery操作文字提示效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

jQuery+css实现图片滚动效果(附源码)_jquery

源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

jQuery实现行文字链接提示效果的方法_jquery

本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xht

Flash中实现JS的图片滚动效果

js 网页中的图片滚动效果,js的对象不太熟,就用flash来了. 大体的流程. 图片加载,效果层加载,设定效果层的_x,_y,使之于图片一一对应. 然后鼠标事件,鼠标经过,stopMove,鼠标点击,openPIC in IE. 图片循环不见断的实现模型: var picNum:Number;//总图片数,解析xml可得.  var picMargin:Number=5;//设置pic的间隔;  if(pic._x<(0-pic._width)){  pic._x=(pic._width+pi

jQuery实现简单的间隔向上滚动效果

 这篇文章主要介绍了jQuery实现简单的间隔向上滚动效果,实例分析了jQuery通过animate与setInterval控制dom元素滚动特效的技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <