Đang chuẩn bị liên kết để tải về tài liệu:
JQuery: Novice to Ninja- P10

JQuery: Novice to Ninja- P10:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | 112 jQuery Novice to Ninja 1. Stack the images on top of each other so that the picture with the highest z-index will be showing. 2. Fade out the top image so that the next image appears to fade in. 3. Once the fade has completed reorder the z-index of the images so that the current image is on top. 4. Repeat steps 2 and 3. A disadvantage of this technique is that we ll be stacking the images on top of each other so they must all be the same size. This usually is a small issue as it s fairly common on the Web to be constrained to a certain area. It should also be noted that it s very easy to switch out the images for divs and be able to cross-fade any HTML in their place. z-index z-index is a CSS property used to specify the visual stacking order of an element. Elements with higher z-index values will appear in front of those with lower values. This can be used in conjunction with absolute or relative positioning to stack elements on top of each other. Looking back at our outline you should be able to tell that steps 1 and 2 are straightforward. Let s start by stacking up our images chapter_04 07_slideshow_cross_fade index.html excerpt p id photos img src images BarronVonJovi.png img src images TheComputadors.png img src images Bosom.png p We need to position the images absolutely and contain them within a bounding box Images and Slideshows 113 chapter_04 07_slideshow_cross_fade style.css excerpt photos img position absolute photos width 180px height 180px overflow hidden Now that our images are stacked let s step back and do some planning. In order to be able to execute step 4 repeating the fade for the next image we ll need to put our fading code in some sort of loop. As the loop needs to keep track of the current photo we re going to move our code out into a named function which we ll call from our document .ready block chapter_04 07_slideshow_cross_fade script.js excerpt document .ready function rotatePics l Now we ll create the rotatePics function which will .