说要用a标签做背景,用2张图片,一张灰的一张本身,那样不累死美工了

<!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行*/

阅读更多
个人分类: css HTML js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭