<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现友情链接图片变亮特效</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
if($.browser.mozilla) {
$('a').hover(function() {
$(this).removeClass('grayscale')
}, function() {
$(this).addClass('grayscale')
});
}
});
</script>
</head>
<body>
<div class="link">
<h1>友情链接</h1>
<ul>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/1.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/2.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/3.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/4.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/5.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/6.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/7.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/8.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/9.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/10.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/11.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/12.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/13.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/14.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/15.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/16.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/17.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/18.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/19.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/20.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/21.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/22.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/23.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/24.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/25.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/26.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/27.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/28.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/29.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/30.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/31.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/32.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/33.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/34.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/35.jpg" alt="" width="140"></a></li>
<li><a href="http://jiayisheji.net/" class="grayscale"><img src="images/36.jpg" alt="" width="140"></a></li>
</ul>
<p>
今天一个朋友需要这个效果，说要用a标签做背景，用2张图片，一张灰的一张本身，那样不累死美工了，还不利于扩展，哈哈<br>
我就去网上找了一些类似的效果，还真的找到了，不过火狐不支持这个效果，就单独给他开小灶，写了hover效果就完美兼容了<br>
基本布局就这样，可能你不需要边框，自己修改css,注意css里面注释的后面一定要留下，你可以修改类的名字<br>
引用jquery，为了火狐，其他基本没有什么了。<br>
</p>
</div>
</body>
</html>
html,body,div,ul,li,a,img,h1{padding: 0;margin: 0;}
ul,li{list-style:none;}
a{outline:none;/*移除虚线框 IE8,FF有用*/hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}
h1{font-size:100%;font-family:\5FAE\8F6F\96C5\9ED1; font-size: 18px; font-weight: bold;}
a,img{border:0;}
.link{width: 1000px; margin:100px auto; height: auto; overflow: hidden;}
.link h1{height: 40px; line-height: 40px; padding-left: 10px;}
.link ul{ border-top: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8; height: auto; overflow: hidden; width: 990px; margin: 0 auto;}
.link li{width: 140px; height: 65px; float: left; border-right: 1px solid #d8d8d8;border-bottom: 1px solid #d8d8d8; padding: 10px 12px;}
.link li a{display: block; float: left; width: 140px; height: 65px; overflow: hidden;}
.link p{font-size: 12px; line-height: 22px; text-align: center;}
.link p a{color: #fe6400;}
.link p a:hover{color:#333;}
/*重要的样式 一定要保留这样2行*/
.grayscale img{filter: grayscale(100%); /*! -webkit-filter: grayscale(100%); */ /*! -moz-filter: grayscale(100%); */ /*! -ms-filter: grayscale(100%); */ /*! -o-filter: grayscale(100%); */ /*! filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); */ /*! filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); */ /*! -webkit-filter: grayscale(1); */}
.grayscale:hover img{-webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0);
filter:url("about:blank");
filter: grayscale(0); filter: rgb; }
/*重要的样式 一定要保留这样2行*/