$(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,即自动滚动
});
基于jQuery的上下无缝滚动应用,可应用于多行或者单行.详解请参考注释.
function ScrollImgLeft(){
var speed=50,
doc=document,
scroll_begin = doc.getElementById("scroll_begin"),
scroll_end = doc.getElementById("scroll_end"),
scroll_div = doc.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
}
ScrollImgLeft();
文字横向滚动:
<div id="gongao">
<div id="scroll_div" style="width:238px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;">
<div id="scroll_begin"><i>《传奇霸业》</i><i>、《斗破苍穹》</i><i>、《花千骨》</i></div>
<div id="scroll_end"><i>、《你好》</i></div>
</div>
</div>
css:
#gongao{width:238px;height:30px;overflow:hidden;line-height:30px;@extend %inlineblock;vertical-align:-7px;}
#gongao #scroll_begin, #gongao #scroll_end{display:inline}
js:
function ScrollImgLeft(){
var speed=50;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
var MyMar=setInterval(Marquee,speed);
scroll_div.οnmοuseοver=function() {clearInterval(MyMar);}
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);}
}
ScrollImgLeft();