仿天猫多图遮罩层效果
效果还好，代码很简单（需引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>
转载于:.html
仿天猫多图遮罩层效果
效果还好，代码很简单（需引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>
转载于:.html