jquery up and down seamless scrolling code (multiple lines in single line)

jquery up and down seamless scrolling code (multiple lines in single line)

$ (function () {
var _wrap=$ (' Ul.line ');//define scrolling area
var _interval=2000;//defines the scrolling gap time
The Var _moving;//need to erase the animation
_wrap.hover (function () {
Clearinterval (_moving)//When the mouse is in the scrolling area, stop scrolling
},function () {
_moving=setinterval (function () {
var _field=_wrap.find (' Li:first ');//This variable cannot be placed at the beginning of the function, Li:first value is changed
var _h=_field.height ()///Get each scroll height (the variable cannot be placed at the beginning, otherwise there will be a long interval) when scrolling in multiple rows.
_field.animate ({margintop:-_h+ ' px '},600,function () {//) hides the first row by taking a negative margin value
_field.css tutorial (' MarginTop ', 0). Appendto (_wrap);//hidden, set the margin value of the row to zero, and insert it to the end, to achieve seamless scrolling
})
},_interval)//scrolling time interval depends on _interval
}). Trigger (' MouseLeave '); When the function loads, simulate the execution of MouseLeave, that is, automatic scrolling
});

Full instance Code

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<style>
/*demo css*/
#demo 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}
#demo Ul.line, #demo ul.mulitline{width:500px; height:30px background: #eee; overflow:hidden;margin-bottom:20px; BORDER:2PX Solid #a40000}
#demo ul.mulitline{height:90px}
#demo li{height:30px;text-indent:15px; font-size:12px; Line-height:30px;list-style:none}
</style>
<script>
/*******************************
* @author Mr.think
* @author Blog/
* @2010.08.08
* Be free to reprint and use, but please specify the copyright ownership
*******************************/
$ (function () {
Single Application @mr.think
var _wrap=$ (' Ul.line ');//define scrolling area
var _interval=2000;//defines the scrolling gap time
The Var _moving;//need to erase the animation
_wrap.hover (function () {
Clearinterval (_moving)//When the mouse is in the scrolling area, stop scrolling
},function () {
_moving=setinterval (function () {
var _field=_wrap.find (' Li:first ');//This variable cannot be placed at the beginning of the function, Li:first value is changed
var _h=_field.height ();//Get each scrolling height
_field.animate ({margintop:-_h+ ' px '},600,function () {//) hides the first row by taking a negative margin value
_field.css (' margintop ', 0). Appendto (_wrap);//hide, place the margin value of the line to zero and insert it to the end to achieve seamless scrolling
})
},_interval)//scrolling time interval depends on _interval
}). Trigger (' MouseLeave '); When the function loads, simulate the execution of MouseLeave, that is, automatic scrolling
});
$ (function () {
Multi-line Application @mr.think
var _wrap=$ (' Ul.mulitline ');//define scrolling area
var _interval=3000;//defines the scrolling gap time
The Var _moving;//need to erase the animation
_wrap.hover (function () {
Clearinterval (_moving)//When the mouse is in the scrolling area, stop scrolling
},function () {
_moving=setinterval (function () {
var _field=_wrap.find (' Li:first ');//This variable cannot be placed at the beginning of the function, Li:first value is changed
var _h=_field.height ();//Get each scrolling height
_field.animate ({margintop:-_h+ ' px '},600,function () {//) hides the first row by taking a negative margin value
_field.css (' margintop ', 0). Appendto (_wrap);//hide, place the margin value of the line to zero and insert it to the end to achieve seamless scrolling
})
},_interval)//scrolling time interval depends on _interval
}). Trigger (' MouseLeave '); When the function loads, simulate the execution of MouseLeave, that is, automatic scrolling
});
</script>

<div id= "Demo" >
<ul class= "line" >
<li><a title= "Easy Click expand/Close effect (native JS version and JQ version)" href= "/js-jq-click-openclose/" > Easy click expand/Close effect (native JS version and JQ version) </a > August 02, 2010 (6) </li>
<li><a title= "getElementsByTagName shorthand" href= "/javascrip-simple-getelementsbytagname/" > getElementsByTagName shorthand </a> June 24, 2010 (4) </li>
<li><a title= "A simple mouse across the switch effect" href= "/script-mousechange-simple/" > A simple mouse across the switch effect </a> May 23, 2010 (4 </li><li><a title= "odd or even row highlighting and mouse across highlighting class" href= "/web Effects-tagnames-highlight/" > odd or even row highlighting and mouse across highlighting class </a> May 05, 2010 (5) </li>
<li><a title= "A simple vertical and horizontal animation effect class" href= "/javascrip-dom-slide-simple/" > a simple vertical and horizontal animation effect class </a> May 02, 2010 ( 4) </li><li><a title= "document.getElementById shorthand" href= "/javascript-getbyid-simplewrite/" > document.getElementById shorthand </a> April 18, 2010 (1) </li>
<li><a title= "Two simple realization menu highlighting JS class" href= "/javascript-highlight-menu-twoway/" > Two simple Implementation menu highlighting JS class </a> April 17, 2010 (</li>)
</ul>
<!--//JQ version//-->
<ul class= "Mulitline" >
<li><a title= "A simple mouse across the switch effect" href= "/script-mousechange-simple/" > A simple mouse across the switch effect </a> May 23, 2010 (4 </li><li><a title= "odd or even row highlighting and mouse across highlighting class" href= "/javascript-tagnames-highlight/" > Odd or even line highlighting and mouse across highlight class </a> May 05, 2010 (5) </li>
<li><a title= "getElementsByTagName shorthand" href= "/javascrip-simple-getelementsbytagname/" > getElementsByTagName shorthand </a> June 24, 2010 (4) </li>
<li><a title= "Two simple realization menu highlighting JS class" href= "/javascript-highlight-menu-twoway/" > Two simple Implementation menu highlighting JS class </a> April 17, 2010 (</li>)
<li><a title= "Easy Click expand/Close effect (native JS version and JQ version)" href= "/js-jq-click-openclose/" > Easy click expand/Close effect (native JS version and JQ version) </a > August 02, 2010 (6) </li>
<li><a title= "A simple vertical and horizontal animation effect class" href= "/javascrip-dom-slide-simple/" > a simple vertical and horizontal animation effect class </a> May 02, 2010 ( 4) </li><li><a title= "document.getElementById shorthand" href= "/javascript-getbyid-simplewrite/" > document.getElementById shorthand </a> April 18, 2010 (1) </li>
</ul>
<!--/multi-line Application//-->
</div>