仿天猫多图遮罩层效果

最新推荐文章于 2024-09-14 19:44:09 发布

weixin_30342209

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/seazeg/archive/2012/09/01/2666534.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>