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に基づく上下シームレススクロールアプリケーションは、複数行または1行に適用することができる.詳しくはコメントを参照してください.
 
 

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();

　　
デモの表示:点此查看DEMO