基于jQuery的上下无缝滚动应用(单行或多行)

基于jQuery的上下无缝滚动应用,可应用于多行或者单行.详解请参考注释.
查看演示: 点此查看DEMO
核心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,即自动滚动
});
共有 37 条评论.

发表评论11,240 Views

  1. 你好,我对WEB前端很感兴趣,想要从事这方面,以后还要请您不吝赐教

    [回复]

  2. 文字控

    嘿嘿,我是js初学者!非常高心看到您的博客!我正在努力学习!希望能够多多帮助!

    [回复]

  3. 我很好奇说如果一个页面里面我要多次调用这样的滚动应该怎样写呢。

    [回复]

  4. 嘿嘿,不错的东西,学习啦。

    [回复]

  5. 怎么改成左右的滚动?代码简洁,感觉不错。

    [回复]

  6. 诸葛村夫

    热心好心的大侠高手Mr.Think:
    本人的请求有点难,本人想做一个单行向上的滚动条,滚动内容是多个本系统内网站当天的头条信息(自动动态获取),请教了,本人做的是本系统内网网站,与互联网不相通。

    例如:我的网站单行向上滚动,每天或每小时自动获取:第一行是新浪新闻头条,第二行是cctv网新闻头条,第三行是凤凰网头条,我想应该能自动实现,但估计太难实现了。

    [回复]

    Mr.Think 回复:

    @诸葛村夫, 既然思路明白为什么不尝试自已去实现呢? 我分享我的知识的初衷是启发初学者的思路,而不是为你们写一个效果。

    [回复]

    诸葛村夫 回复:

    @Mr.Think, 思路清楚,但我技术水平不到家,能麻烦你帮我一下吗

    [回复]

    Mr.Think 回复:

    @诸葛村夫, 我不提供此类服务,到蓝色理想论坛发贴吧。

  7. 没想到初来这里,就能找到很多好的东西。

    [回复]

  8. 初到这里,收益甚多,希望能和你多学习。

    [回复]

  9. 在哪下载源代码,谢谢

    [回复]

    Mr.Think 回复:

    @happy,在 样例演示页面 查看页面源代码 复制粘贴

    [回复]

  10. 你这个缝太明显太严重了嘛。。。

    [回复]

    Mr.Think 回复:

    @tt, 哈,不会是你使用的问题或者网速问题吧,这个下下滚动很平滑的..

    [回复]

  11. 我去好好学习下,呵呵……

    [回复]

  12. ie6下不滚动….还没想明白为什么

    [回复]

    Mr.Think 回复:

    @橘子, 哦? 好好检查一下兼容性,以及是否与别的JS有冲突. DEMO我在IE6下测试过,一切正常, 你也可以测试一下.

    [回复]

    橘子 回复:

    @Mr.Think, 这个问题我解决了 别的js冲突. 从你这里找不到不少好东西.最近一直在搞php 没做前端 所以好久没来了 嘿嘿.

    [回复]

  13. 那个多行滚动
    如果内容超长了 ,貌似会出现重叠。
    有方法解决么。

    [回复]

    Mr.Think 回复:

    @Vegeta, 内容超长了,建议隐藏掉,呵,这个是通过定高来实现滚动的.

    [回复]

  14. 好好活着

    你好,我用了这个效果,公告是多行向上,图片我是改成了向左,一次显示3个,现在我想改成焦点图,一次一个,这个很好改,关键是我想加上数字,调用5条,显示1,2,3,4,5,滚动到第几张,数字就高亮,请问该怎么加呢?谢谢

    [回复]

    Mr.Think 回复:

    @好好活着, 请参考: http://mrthink.net/jquery-clickslide-autoslide-showimg/

    [回复]

  15. talentkai

    如何实现 从上往下滚动呢?
    能不能做个类似 sina微博 首页 慢慢加载微博信息的那种效果呢

    [回复]

    Mr.Think 回复:

    @talentkai,
    1. 自上而下的效果, 你可以尝试将最后一条remove()掉,然后插入到第一条前面,每间隔时间执行一次即循环. 自己尝试下;
    2. 微博首页效果, 你可以尝试利用scroll函数延时加载页面.

    [回复]

    talentkai 回复:

    @Mr.Think,
    谢谢! 我试验了下你第一点建议, 可以没有你示范中的滑动效果了。
    不知 能否帮忙看下

    [回复]

    Mr.Think 回复:

    @talentkai, 可将你写的代码mail给我.

  16. 这东西不错。如果能多一点效果会更好。比如不间断滚动,不是一顿一顿的。

    [回复]

    Mr.Think 回复:

    @wmtimes, 请自行扩展.

    [回复]

  17. 如果换成图片感觉滚动不是很自然

    [回复]

    Mr.Think 回复:

    @lee, 呵~思考一下原因嘛. 没猜错的话,你图片高度肯定比DEMO中行高要高多,你用我实例中的间隔时间就完成比DEMO中行高高许多的图片,肯定会不自然. 调整一下间隔时间,或者调整一下整个animate不就好了

    [回复]

  18. 顺着博客园过来的,可以加个友联吗

    [回复]

    Mr.Think 回复:

    @向晚, ok,没问题 . 请把你的链接信息提交上来,并在你的网站中加上我的链接.

    [回复]

  19. 单行滚动没什么问题
    但是多行的话还是有些卡

    [回复]

    Mr.Think 回复:

    @Richieliu, 感谢提醒,已修正.

    [回复]

发表评论[无需注册]

Trackbacks and Pingbacks: