jquery Plugin--picture text scroll up and to the left

Need to reference jquery

The invocation is very simple:

One, scroll up

$ (". Scroll_two"). Jscroll ({vertical: true});

<Divclass= "box Scroll_two">    <ul>        <Li><ahref="#">Statement</a>|<ahref="#">Farmer Spring Solemn statement on charitable donation</a></Li>        <Li><ahref="#">New car</a>|<ahref="#">Appearance comparable sedan full-new generation Odyssey September debut</a></Li>        <Li><ahref="#">Activities</a>|<ahref="#">Open Yanjing beer refreshing tour to win million-dollar SLR camera</a></Li>        <Li><ahref="#">Explore the Secret</a>|<ahref="#">Discover the magical journey of Moslian in the village of longevity</a></Li>        <Li><ahref="#">Middle Room</a>|<ahref="#">2009CIHAF 11th session of China Residence Fair</a></Li>        <Li><ahref="#">Hp</a>|<ahref="#">Can your printer save 50% of your printing costs?</a></Li>    </ul></Div>

Second, turn left screen

$ (". Scroll_three"). Jscroll ({speed:2000, scroll:3});

<div class= "box scroll_three" ><ul><li><a href= "#" ></a></li><li><a href= "#" ></a></li><li><a href= "#" ></a></li><li><a href= "#" ></a></li><li><a href= "#" ></a></li><li><a href= "#" ></a></li></ul></div>

　　

The source code is as follows:

;(function($) {$.fn.extend ({"Jscroll":function(o) {o=$.extend ({auto:3000,//delay Time (ms)speed:800,//Single Scroll Duration (ms)Verticalfalse,//whether to scroll up (default to left)Scroll:1//number of elements per scroll},o);varrunning =false, Sizecss = o.vertical? "Height": "width", ulsize = 0;varScrolltimer, Scrolllen, ItemSize, animcss, I;vardiv = $ ( This), UL = Div.find ("ul"), Li = Ul.children ("li"));d iv.css ({overflow:"Hidden"}); Ul.css ({margin:"0", padding: "0", Display: "Inline-block"}); Li.css ({"List-style-type": "None",float: O.vertical? "None": "Left"});//Get LI Element total width (high) for(i=0; I<=li.size ()-1; i++) {itemsize= o.vertical?Li.eq (i). Outerheight (): Li.eq (i). Outerwidth (); Ulsize+=itemsize;}varDivsize = o.vertical? Div.height (): Div.width ();//container width (high)Ul.css (Sizecss, (ulsize*2) + "px");if(Ulsize > Divsize) running =true;//ul width (high) greater than the width of the device (high) to scrollDiv.hover (function() {clearinterval (Scrolltimer);},function(){if(running) {Scrolltimer= SetInterval (function() {Scrolllen= 0; ItemSize= 0; Li= Ul.children ("li"); for(i=0; i<=o.scroll-1; i++) {itemsize= o.vertical?Li.eq (i). Outerheight (): Li.eq (i). Outerwidth (); Scrolllen+=ItemSize;} Animcss= o.vertical? {Margintop:-scrolllen + "px"}: {Marginleft:-scrolllen + "px"};ul.animate (Animcss, O.speed,function() {ul.css (o.vertical? "Margin-top": "Margin-left", "0"); Li.slice (0,o.scroll). APPENDTO (UL);//move the previous element to the end})}, parseint (O.auto+o.speed));}). Trigger ("MouseLeave");//automatically executes the fn2 of hover (fn1, FN2) after the DOM is loaded}});}) (jQuery);

Download example

jquery Plugin--picture text scroll up and to the left