Làm mờ các phần tử trong li

Cập nhật lần cuối 18/03/2017 by trong HTML&CSS vào 15/10/2013 có 652 Views
Các bạn ơi! TINO HOST đang giảm 51% Unlimited Hosting chỉ còn 39k/tháng thôi nha. Hosting KHÔNG GIỚI HẠN nha
Chi tiết Về Tino Host tại đây
Chi tiết giá Hosting tại đây

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.

DemoDownload Now

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&amp;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!

Từ khóa: ,
Các bạn ơi! TINO HOST đang giảm 51% Unlimited Hosting chỉ còn 39k/tháng thôi nha. Hosting KHÔNG GIỚI HẠN nha
Chi tiết Về Tino Host tại đây
Chi tiết giá Hosting tại đây
  • Bình luận
Hosting nên dùng cho WordPress tại Việt Nam
Nhắn tin cho tôi 0965.419.096
Sản phẩm nổi bật của Toản
x