基于jQuery的上下无缝滚动应用(单行或多行)
更新时间：2010年08月10日 21:11:12 作者：
基于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 _=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
演示代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
$(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 _=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
演示代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
BootStrap的table表头固定tbody滚动的实例代码
本文给大家分享一段关于BootStrap的table表头固定tbody滚动的实例代码,代码简单易懂，需要的朋友可以参考下2016-08-08
基于jquery获取指定样式的参数信息。2010-07-07
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
这篇文章主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
根据多个属性选择在某些对选择比较精确的情况下，还是比较实用的，其实很简单，不会的朋友看下本文2013-10-10
这篇文章主要介绍了jQuery中index()的用法分析,针对API示例进行分析,给出了改进方法的实例,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了jQuery 选择符详细介绍及整理的相关资料,这里整理了选择符的一些资料，帮助到家学习这部分内容，需要的朋友可以参考下2016-12-12
Checbox的操作包括已选、未选、判断等等，下面有个不错的示例，使用jquery完成，感兴趣的朋友可以参考下2013-11-11
本节主要介绍了jquery如何批量修改标签css样式以input标签为例,需要的朋友可以参考下2014-07-07
今天我再来向大家介绍一款jquery图表插件jqplot，下面是一些中文说明，希望对你有所帮助2012-02-02
这篇文章主要介绍了jquery实现pager控件示例,需要的朋友可以参考下2014-04-04
最新评论