zoukankan      html  css  js  c++  java
  • 仿天猫多图遮罩层效果

    效果还好,代码很简单(需引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>
  • 相关阅读:
    V-Ray Material Library材质名称翻译
    3dMax常用快捷键
    3dMax笔记(韵湖)
    background-size拉伸背景图片
    CSS实现子元素水平垂直居中的6种方式
    JS简易实现“最小栈”
    JS种Array原型方法reverse的模拟实现
    JS数组去重的3种方式
    encodeURIComponent和encodeURI有什么区别
    CSS中的度量单位(px/em/rem/vm/vh/...)
  • 原文地址:https://www.cnblogs.com/seazeg/p/2666534.html
Copyright © 2011-2022 走看看