Display Effect:
Split the photo into four or more parts, move the cursor to the corresponding part to switch
Reference: http://www.17sucai.com/pins/419.html
Now let's start again!
Step 1First, cut the page into four blocks.
Layout code
<div id="slide" class="slide bg1"> <div class="slide_box bg1"> </div> <div class="slide_box bg1"> </div> <div class="slide_box bg1"> </div> <div class="slide_box bg1"> </div> </div>
CSS style
/******* Start initialization *******/body, Div, DL, DT, DD, UL, ol, Li, H1, H2, h3, H4, H5, H6, pre, code, form, fieldset, legend, input, button, textarea, P, BLOCKQUOTE, Th, TD {margin: 0; padding: 0;} fieldset, IMG {border: 0;}/********* end ********/. slide {width: 800px; Height: 550px; margin: 0 auto; Background: #000; Border: 1px solid # d21bd4; overflow: hidden ;}. slide_box {width: 24.8%; Height: 550px; float: Left; border-Right: 1px solid #999; cursor: pointer; Background-repeat: No-Repeat ;}. bg1 {background-image: URL (images/Chen .jpg); background-size: cover ;}. bg2 {background-image: URL (images/ 2.2.jpg); background-size: cover ;}. bg3 {background-image: URL (images/Family Fu 3.jpg); background-size: cover ;}. bg4 {background-image: URL (images/ 4.4.jpg); background-size: cover ;}
Effect:
Step 2: Set background-position to locate the background position of each small block, combine the four blocks into one image, and use jquery to animation it.<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.4.2.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> $ (function () {/******* start registers the mouse movement event *******/$ ("# Slide>. slide_box "). mouseover (function () {var focusindex = $ (this ). index (); // index from 0 var c = "BG" + (focusindex + 1 ); // set the background for all child blocks and the initial background start point $ (". slide_box ").stop().css (" backgroundposition "," 800 p x 0 "). removeclass ("Bg1 bg2 bg3 bg4 "). addclass (c); // scroll to the corresponding position in sequence $ ("# Slide>. slide_box: eq (0 )"). stop (). animate ({backgroundposition: "0 0"}, 1000); $ ("# Slide>. slide_box: eq (1 )"). stop (). animate ({backgroundposition: "-200 P x 0"}, 2000); $ ("# Slide>. slide_box: eq (2 )"). stop (). animate ({backgroundposition: "-400 p x 0"}, 3000); $ ("# Slide>. slide_box: eq (3 )"). stop (). animate ({backgroundposition: "-600 p x 0"}, 4000, // after execution, confirm the background function () {$ (". slide_box, # Slide "). removeclass ("Bg1 bg2 bg3 bg4 "). addclass (c)}) ;};}); </SCRIPT>
Currently, it is only tested in chrome. ie may not work because backgroundposition does not have only backgroundposition-X, so compatibility is required. : This is a switching effect.
Step 3 Add the CSS style in the overview bar************/. Slide_box. topicbox {position: absolute; left: 0; bottom: 0; width: 100%; color: White ;}. slide_box. topicbox. navtitle {Height: 2.5em; line-Height: 2.5em; overflow: hidden; font-size: 1.5em; text-align: center; border-bottom: solid 1px black ;}. slide_box. topicbox. navsumary {padding: 0.6em; margin-bottom: 0.2em; font-size: 1em ;}. slide_box Div. BG {position: absolute; width: 100%; Height: 100%; Z-index: 1; left: 0; top: 0; Background-color: #515151; filter: alpha (opacity = 60); opacity :. 6 ;}. topicbox. TXT {z-index: 2; position: relative;/* relativity */}. slide. topicbox. navtitle ,. slide. topicbox. navtitle A: Link ,. slide. topicbox. navtitle A: visited {color: # FFF; text-Decoration: none ;}. slide. topicbox. navtitle A: hover {color: # FFF; text-Decoration: underline ;} /*********** end ***********/
Div Layout
<Body> <Div id = "slide" class = "slide bg2"> <Div class = "slide_box bg2" style = "background-position: 0 0; "> <Div class =" topicbox "> <Div class =" navtitle "> <Div class =" BG "> </div> <Div class =" TXT ">Additional knowledge points:
Condition comments in IE (<! -- [If lt IE 7]> <! [Endif] -->) (http://www.cnblogs.com/poissonnotes/archive/2010/05/28/1745996.html)
Articles on relative absolute positioning experience
CSS relative/absolute (relative/absolute) Positioning series (4) Zhang Xin Xu-xin space-... (http://www.zhangxinxu.com/wordpress? P = 1834)
Combination of position relative and absolute in CSS (http://www.idivcss.com/xuexicss/157.html)
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
