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ó 1294 Views

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!

5/5 - (1 vote)
Từ khóa: ,
  • Bình luận
Sản phẩm nổi bật của Toản
x