仿天猫多图遮罩层效果
效果还好，代码很简单（需引JQ库），hover以及opacity应用，无太多技术含量。兼容ie6+,chrome,ff
HTML：
<body> <div id="main"> <div id="wapper"> <div id="imgbox"> <ul id="imgbox_ul"> <li ><a href="#"> </a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li ><a href="#"> </a></li> <li><a href="#"></a></li> <li ><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li ><a href="#"> </a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> </div></body>
css：
<style type="text/css"> body { background: #111; } .main { width: 1000px; height: 1000px; margin: 0 auto; } .wapper { width: 980px; height: 430px; } .imgbox { width: 960px; height: 400px; overflow: hidden; } .imgbox ul { list-style: none; } .imgbox li { float: left; width: 120px; height: 120px; margin-left: 10px; margin-top: 10px; } .imgbox li a { float: left; width: 120px; height: 120px; } .tdiv { /*opacity: 0.5;*/ -moz-opacity: 0.5; -khtml-opacity: 0.5; } </style>js代码：
<script type="text/javascript"> $(function () { $("#wapper").css("background", "#fff"); $("#imgbox_ul li").css("opacity", "1"); $("#wapper").hover(function () { $(this).css("background", "#000"); $("#imgbox_ul li").addClass("tdiv").css("opacity", "0.5"); }, function () { $(this).css("background", "#fff"); $("#imgbox_ul li").removeClass("tdiv").css("opacity", "1"); }); $("#imgbox_ul li").hover(function () { $(this).css("opacity", "1"); }, function () { $(this).css("opacity", "0.5"); }); });</script>TAG:
