search

Home >Web Front-end >JS Tutorial >Seamless scrolling application (single or multiple lines) based on jQuery_jquery

Seamless scrolling application (single or multiple lines) based on jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 18:21:381144browse

Core jQuery code:

Copy code The code is as follows:

$(function(){
var _wrap=$('ul.line');//Define the scrolling area
var _interval=2000;//Define the scrolling gap time
var _moving;//Animation that needs to be cleared
_wrap.hover (function(){
clearInterval(_moving);//When the mouse is in the scroll area, stop scrolling
}, function(){
_moving=setInterval(function(){
var _field =_wrap.find('li:first');//This variable cannot be placed at the beginning of the function, the value of li:first changes
var _=_field.height();//Get each scroll Height (in the case of multi-line scrolling, this variable cannot be placed at the beginning, otherwise there will be an interval delay)
_field.animate({marginTop:-_h 'px'},600, function(){//pass Take a negative margin value and hide the first row
_field.css('marginTop',0).appendTo(_wrap);//After hiding, set the margin value of the row to zero and insert it to the end to achieve seamlessness scrolling
})
},_interval)//The scrolling interval depends on _interval
}).trigger('mouseleave');//When the function is loaded, mouseleave is simulated, that is, automatic scrolling
});

Demo code:

<script> /******************************* * @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,即自动滚动 }); </script> [Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js code that filters special characters input_javascript skillsNext article：js code that filters special characters input_javascript skills

Related articles

See more