TAILIEUCHUNG - 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 excerpt p id photos img src images img src images img src images 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 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 excerpt document .ready function rotatePics l Now we ll create the rotatePics function which will .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình photoshop
• css căn bản
• thủ thuật cắt html
• đồ họa máy tính
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động