Core code
Please refer to the notes for detailed explanation.
| The code is as follows |
Copy Code |
$ (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 (' 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
}); |
HTML code
| code is as follows |
copy code |
| <!-- Demo Start-->
<div id= "Demo"
<ul class= "line"
<li ><a title= "Simple click expand/Close effect (native JS version and JQ version)" href= "> Easy click expand/Close effect (native JS version and JQ edition) </a> August 02, 2010 (6) </li>
<li><a title= "getElementsByTagName shorthand for" href= ">getelementsbytagname shorthand </a> June 24, 2010 (4) </li>
</ul>
<!--//jq version//-->
<ul class= "Mulitline" "
<li><a title=" a simple mouse across the switch effect "href=" > A simple mouse across the switch effect </a> May 23, 2010 (4) </li><li><a title= "odd or even row highlight and mouse across highlight class" > odd or even line highlighting and mouse across highlight class </a> May 05, 2010 (5) </li>
</ul>
<!--//multiline application//-->
</div>
<!--DEMO End--> |
