仿天猫多图遮罩层效果

效果还好，代码很简单（需引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>

相关阅读:
3dsmaxunity3d
libav android移植交叉编译
 libav 由显卡中读取数据制作视频
 超详细mysql left join,right join,inner join用法分析
 VC常见入门问题总结
 c#皮肤美化
 论坛
 vc中文件的读写操作
 MySQL的mysqldump工具的基本用法
 perl产生随机数
原文地址：https://www.cnblogs.com/seazeg/p/2666534.html