Juqery makes the world a better place-super simple and practical (top and bottom) automatic turning of the best results, as shown in the figure!

Today is my first blog post. Although I have been registered for more than a year, I seldom sum up some of my experiences at ordinary times. I have learned a lot in the blog garden, in the big family of blog Park, I deeply realized that only sharing can achieve more gains, and I hope to stick to more writing technologies in the future.ArticleTo improve your technology, and hope to make progress together with everyone!

I am also a cainiao. I am not talking much about it. I will post my own summary and exploration results,CodeAs follows:

Effect:

<SCRIPT type = "  Text/JavaScript  " > //  Scroll up  Function autoscroll1 (OBJ ){  VaR Scrollheight = $ ( "  Ul Li: first "  ). Height ();  If ($ (OBJ). ATTR ( "  Name  " )! = "  Hovered  "  ) {$ (OBJ). Find (  "  # Ul1  "  ). Animate ({margintop:  "  -  " + Scrollheight + "  Px  "  },  1000  , Function () {$ (  "  Ul: first Li  " ). Eq ( 2 ). Fadein ( 500  ); $ (  "  Ul: first Li: GT (3)  " ). ATTR ( " Style  " , "  Background: #006699; display: Block  "  ); $ (  This ).Css ({margintop: "  0px  " }). Find ( "  Li: first  " ). Appendto ( This  ); $ (  " Ul: first Li: GT (2)  " ). ATTR ( "  Style  " , "  Background: #006699; display: None  "  );});}}  //  Scroll down  Function autoscroll2 (){  If ($ ( "  # Scrolldiv2  " ). ATTR ( "  Name  " )! = "  Hovered  "  ) {$ (  "  # Scrolldiv2 # ul2 Li: Last  " ). Hide (). insertbefore ($ ( "  # Scrolldiv2 # ul2 Li: first  " ). Slidedown ( 1000 ) ;}} Function hoverfun (OBJ) {$ (OBJ). Hover (function () {$ (  This ). ATTR ( "  Name  " , "  Hovered  "  ) ;}, Function () {$ (  This ). Removeattr ( "  Name  "  ) ;}) ;}$ (Document). Ready (function () {hoverfun ( "  # Scrolldiv1  "  ); Hoverfun (  "  # Scrolldiv2  "  ); Setinterval (  '  Autoscroll1 ("# scrolldiv1 ")  ' , 3000  ); Setinterval (  "  Autoscroll2 ()  " ,3000  );}); </SCRIPT> <style type = "  Text/CSS  " > Ul, Li {margin: 1px; padding:  0  ; Height: pixel PX; width: pixel PX; color: White; font - Size: 24px; font - Weight: bold; text - Align: center;}. banner_little {Height: pixel PX; line - Height: pixel PX; overflow: hidden;} ul Li {list -Style-Type: none ;} </Style> <Div id = "  Scrolldiv1  "   Class = "  Banner_little  " Style = "  Margin-left: 100px; position: absolute  " > <Ul id = "  Ul1  " > <Li style = " Background: #006699  " > Flip up, first line </LI> <li style = "  Background: #006699  " > Flip up, second line </LI> <li style = "  Background: #006699; display: None  " > Flip up, Row 3 </LI> <li style = "  Background: #006699; display: None  " > Flip up, row 4 </LI> </ul> </div> <Div id = " Scrolldiv2  "   Class = "  Banner_little  " Style = "  Margin-left: 400px; position: absolute  " > <Ul id = "  Ul2  " > <Li style = "  Background: #006699;  " > Flip down, first line </LI> <li style = "  Background: #006699;  " > Flip down, second line </LI> <li style = "  Background: #006699;  " > Flip down, Row 3 </LI> <li style = "  Background: #006699;  " > Flip down, row 4 </LI> </ul> </div>

 

My own capabilities are limited, and I hope to do my best, simple and practical! Tomorrow, write .......

Your support is my greatest motivation. If you think it is okay, please give it"Recommendation"!