Có thể bạn quan tâm
Một hiệu ứng phù hợp với giao diện metro website. Các bạn cùng tìm hiểu nha.
Các thành phần chính:
HTML:
<div> <ul> <li><a href="#"><img src="https://lh4.googleusercontent.com/-J621cGpOQ7U/T4xwcZZSH1I/AAAAAAAAJFI/d2J1pCOj9ac/s57/Facebook%2520alt%25201.png"></a></li> <li><a href="#"><img src="https://lh5.googleusercontent.com/-G6yamZXq9Cs/T4xwcdajchI/AAAAAAAAJFQ/psDy5hhHRBY/s57/Google%252B%2520alt.png"></a></li> <li><a href="http://www.youtube.com/watch?v=vGR7Qbbgs-s&feature=plcp" target="_blank"><img src="https://lh4.googleusercontent.com/-ao9NUL4mmD8/T4xwdY9OIhI/AAAAAAAAJFY/P4FJK8DEsYk/s57/YouTube%2520alt%25201.png"></a></li> <li><a href="#"><img src="https://lh5.googleusercontent.com/-a6BkH5MZiR4/UEnig0PU7NI/AAAAAAAABkI/ES0US1pYkg0/s57/homea6.png"></a></li> <li><a href="#"><img style="width: 200px" src="https://lh4.googleusercontent.com/-6hSpPjttNBk/UEnfUA328MI/AAAAAAAABj0/MV53ESaBtRo/s200/lienhe.png"></a></li> </ul> </div>
CSS:
*{margin: 0;padding:0} .fade{ width: 200px; margin: 0 auto; top: 200px; position: relative; } .fade ul li img{ width: 50px; height: 50px; } .fade ul li{ list-style: none; float: left; }
Java:
Bạn cần file fadelist.js và thêm đoạn code này vào web là ok
$(document).ready(function(){ if(!$.browser.msie) $(".fade ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);}, function() { $(this).siblings().stop().fadeTo(400,1); }); });
Trong đó:
.fadeTo(400,0.4) là thông số khi đưa chuột vào 1 phần tử trong <li> thì các phần tử còn lại giảm opacity còn 0.4
.fadeTo(400,1) khi đưa chuột ra khỏi <div> thì opacity là 1
Chú ý: chỉ các thẻ ul li trong <div> có mới có hiệu ứng này thôi nhé. Nếu muốn thay đổi thì bạn thay đổi trong phần java nhé $(“.fade ul li”)
Các bạn thay đổi lại cho phù hợp với mình nha.
Chúc các bạn thành công!
- Bình luận