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ó 1342 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

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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!

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