基于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,即自动滚动 
});

演示代码:










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


/*reset css*/
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em}
div,h2,p,ul,li{margin:0;padding:0}
h1{font-size:1em; font-weight:normal;}
h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;}
h1 a:hover{background:#a40000; color:#fff; text-decoration:underline}
h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative}
/*demo css*/
h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
ul.line,ul.mulitline{width:500px; height:30px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
ul.mulitline{height:90px}
li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}


/*******************************
* @author Mr.Think
* @author blog http://mrthink.net/
* @2010.08.08
* @可自由转载及使用,但请注明版权归属
*******************************/
$(function(){
//单行应用@Mr.Think
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,即自动滚动
});
$(function(){
//多行应用@Mr.Think
var _wrap=$('ul.mulitline');//定义滚动区域
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值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});



Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.

返回文章页:基于jQuery的上下无缝滚动应用(单行或多行)


单行应用


简易的点击展开/关闭效果(原生JS版和JQ版) 2010年08月02日 (6)
getElementsByTagName的简写方式 2010年06月24日 (4)
一个简单的鼠标划过切换效果 2010年05月23日 (4)奇或偶数行高亮显示及鼠标划过高亮显示类 2010年05月05日 (5)
一个简单的纵横向动画效果类 2010年05月02日 (4)document.getElementById的简写方式 2010年04月18日 (1)
两种简单实现菜单高亮显示的JS类 2010年04月17日 (10)


多行应用


一个简单的鼠标划过切换效果 2010年05月23日 (4)奇或偶数行高亮显示及鼠标划过高亮显示类 2010年05月05日 (5)
getElementsByTagName的简写方式 2010年06月24日 (4)
两种简单实现菜单高亮显示的JS类 2010年04月17日 (10)
简易的点击展开/关闭效果(原生JS版和JQ版) 2010年08月02日 (6)
一个简单的纵横向动画效果类 2010年05月02日 (4)document.getElementById的简写方式 2010年04月18日 (1)




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]