仿天猫多图遮罩层效果
效果还好,代码很简单(需引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="width: 380px; height: 120px"><a style="background: url(img/6.gif) no-repeat; width: 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>