Home > Developer > Web Develop
The HTML+CSS code is as follows:
<!doctype Html>"Utf-8"><title>index</title><style type="Text/css">body,ul,li{margin:0px; padding:0px;} body{Background:url (img/bg.jpg) Center; } #banner {width:730px; height:390px; /*border:solid 1px #ff0;*/margin:100px Auto 0px; Background-image:url (img/1. png); Border-radius:10px; Box-shadow:0px 0px 15px #fff; } #btn {width:55px; height:280px; Position:fixed; right:30px; top:150px; } #btn ul li{list-Style:none; width:55px; height:55px; Border-radius: -%; margin:10px0; Background-image:url (img/icon.jpg); Cursor:pointer; }</style><script type="Text/javascript"Src="Js/jquery.js"></script><script type="Text/javascript">$ (function () {varIndexc=0;varplay=NULL; $("#btn ul Li"). Click (function () {clearinterval (play); Indexc=$( This). index (); /*$ (this). Animate ({' background-position-x ': ' -80px '},500). Siblings (). CSS (' background-position-x ', ' 0 '); $ ("#banner"). Animate ({' background-position-y ': -390*indexc+ ' px '},500);*/move (); Play=play=setinterval (function () {Indexc++; Indexc%=4; Move (); }, the) ; }); Play=setinterval (function () {Indexc++; Indexc%=4; Move (); }, the) ; function Move () {$ ("#btn ul Li"). EQ (indexc). Animate ({'Background-position-x':'-80px'}, -). Siblings (). CSS ('Background-position-x','0'); $("#banner"). Animate ({'background-position-y':-390*indexc+'px'}, -); } });</script>"Banner"> </div> <div id="btn"> <ul> <li></li> <li style="background-position-y:56px;"></li> <li style="background-position-y:126px;"></li> <li style="background-position-y:-70px;"></li> </ul> </div></body>Full footage and code download
Summarize:
1, the page adjusts the background picture position, background-position This attribute is very important, by adjusting this attribute the value can realize each layout different position picture;
2, the scrolling effect of the picture, we can use setinterval to define the timer, while the clearinterval can be cleaned by the timer;
3, the background area of the glow effect, we can be set by Box-shadow, the property passed in four parameters: offset x direction, offset y direction, diffusion radius, and shadow color;
Html+css page Scrolling effect processing
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
