效果还好，代码很简单（需引JQ库），hover以及opacity应用，无太多技术含量。兼容ie6+,chrome,ff
HTML：
<body> <div class="main" id="main"> <div class="wapper" id="wapper"> <div class="imgbox" id="imgbox"> <ul id="imgbox_ul"> <li style="margin-left: 0;"><a style="background: url(img/1.gif) no-repeat;" href="#"> </a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li style="margin-left: 0;"><a style="background: url(img/1.gif) no-repeat;" href="#"> </a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li style=" 380px; height: 120px"><a style="background: url(img/6.gif) no-repeat; 380px; height: 120px" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li style="margin-left: 0;"><a style="background: url(img/1.gif) no-repeat;" href="#"> </a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" href="#"></a></li> <li><a style="background: url(img/1.gif) no-repeat;" 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>