Home > Developer > JavaScript
Jquery implements simple seamless scrolling
Jquery implements simple seamless scrolling
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<! DOCTYPE html> <Html> <Head lang = "en"> <Meta charset = "UTF-8"> <Title> </title> <Script src = "jquery-1.7.2.min.js" type = "text/javascript"> </script> </Head> <Style> * {Margin: 0px; padding: 0px ;} Li {list-style: none ;} . Content {width: 1020px; height: pixel PX; overflow: hidden; border: #4e83c2 solid 1px; margin: 50px auto ;} . Content ul {width: 1020px; height: 100px ;} . Content ul li {float: left; width: 100px; height: 100px; border: # ccc solid 1px; display: block; margin: 5px ;}
</Style> <Body> <Div class = "content"> <Ul> <Li> 1 </li> <Li> 2 </li> <Li> 3 </li> <Li> 4 </li> <Li> 5 </li> <Li> 6 </li> <Li> 7 </li> <Li> 8 </li> <Li> 9 </li> <Li> 10 </li> <Li> 11 </li> <Li> 12 </li> <Li> 13 </li> <Li> 14 </li> <Li> 15 </li> <Li> 16 </li> <Li> 17 </li> <Li> 18 </li> <Li> 19 </li> <Li> 20 </li> <Li> 21 </li> <Li> 22 </li> <Li> 23 </li> <Li> 24 </li> </Ul> </Div> <Script> Function scroll (){ $ (". Content ul"). animate ({"margin-left": "-110px"}, function (){ $ (". Content ul li: eq (0)"). appendTo ($ (". content ul ")) $ (". Content ul" ).css ({"margin-left": 0 }) }) } SetInterval (scscroll, 1000) </Script> </Body> </Html> |
Scroll () usage:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Function scroll (){ $ (". Content ul"). animate ({"margin-left": "-110px"}, function (){ // This is to let the entire ul first slide forward a li, if you want to slide 5 ~ It is 550px. // If You Want To scroll up, change it to $ (". content ul"). animate ({"margin-top": "-105px "} // If You Want To scroll down, change it to $ (". content ul"). animate ({"margin-top": "105px "} // If You Want to scroll to the right, change it to $ (". content ul"). animate ({"margin-left": "110px "} $ (". Content ul li: eq (0)"). appendTo ($ (". content ul ")) $ (". Content ul" ).css ({"margin-left": 0 }) // Corresponding to this // If You Want To scroll up, change it to $ (". content ul"). animate ({"margin-top": 0} // If You Want To scroll down, change it to $ (". content ul"). animate ({"margin-top": 0} // If You Want to scroll to the right, change it to $ (". content ul"). animate ({"margin-left": 0} }) } SetInterval (scscroll, 1000) // The above 1000 is the rolling speed, which can be adjusted by yourself |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
