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

 

基于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.onmouseover=function() {clearInterval(MyMar)}
  scroll_div.onmouseout=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.onmouseover=function() {clearInterval(MyMar);} 
    scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 
} 


ScrollImgLeft();