乌徒帮技术范WEB开发jQuery › 用jquery无缝自适应高度隔时上下滚动

用jquery无缝自适应高度隔时上下滚动

分类:jQuery

本文实现了利用jquery无缝上下滚动,同时滚动时有一定时间间隔,并且还实现了自适应显示内容的高度。这是在其他博客看到了相关的代码,于是自己稍微研究了一下,稍稍发展然后分享出来。你可以用这个代码来实现如公告、心情、微博等的展示。

核心代码

这是从对方那里获得的核心代码

$(function(){
var _wrap=$('ul.line');//定义滚动区域
var _interval=2000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});

上面这段代码实现了主要功能,你唯一需要修改的就是将ul.line换为你自己的区域块,所有的滚动就在这个区块内;将li换为你的代码中滚动的行,如div.gundong。建议你将要滚动的内容用li来排列,这样即清晰又方便程序查找,下文中我们还会用到。

增加自适应效果

并非所有的li高度都相同,内容多少不定导致不同的li高度不同。乌徒帮的方法是在每次滚动完之后将ul.line的高度改为目前第一个li(也是目前的li:first)的高度,添加的代码如下:

_containerH=_wrap.find('li:first').height();
_wrap.height(_containerH);

但这样又有一个问题,即第一次进入页面时由于没有高度的控制,ul.line的高度是随机的,因此,我们还要将上面的这段代码使用到var _wrap=$('ul.line');//定义滚动区域 紧接着后边,这样页面一加载就让ul.line的高度等于第一个li的高度,没变换一次,高度修改一次,实现了高度自适应。

当然,这样只能让读者每次看到一条信息,如果要看多条信息可以使用:eq(0-9)来选择,例如每次要显示两条信息,那么我就需要让_containerH=_wrap.find('li:eq(0)').height()+_wrap.find('li:eq(1)').height();即让ul.line的高度等于前两个li高度之和。

最终代码

下面这段代码实现一条滚动,演示:请到努努比http://www.nunubi.com首页右侧查看。

$(function(){
//多行应用http://www.utubon.com
var _wrap=$('ul.line');//定义滚动区域
_containerH=_wrap.find('li:first').height();
_wrap.height(_containerH);
var _interval=3000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
_containerH=_wrap.find('li:first').height();
_wrap.height(_containerH);
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});

已有1条评论 快速评论
  1. DH #287楼 2011/08/31 09:15:51 回复

    lzjs用的很溜啊!

填写个人信息,赶快回复吧!