zoukankan      html  css  js  c++  java
  • 夺命雷公狗jquery---33高仿hao123左侧导航栏

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                html,body {
                    margin:0;
                    padding:0;
                    height:100%;
                }
                div.menu {
                    width:46px;
                    height:100%;
                    background-color:#E6E6E6;
                    position:absolute;
                    left:0;
                }
                ul,li {
                    margin:0;
                    padding:0;
                    padding:10px 2px;
                    list-style:none;
                }
                div#arrow {
                    position:absolute;
                    left:0;
                    bottom:50px;
                    z-index:2;
                }
            </style>
            <script src="js/jquery.js"></script>
            <script>
                //用jquery1.8.3能用,别2.几没作用
                $(function(){
                    $('#arrow img').toggle(function(){
                        $('div.menu').animate({
                            left:-46
                        },3000);
                        $('#arrow img').attr('src','images/hao123/right.jpg');
                    },function(){
                        $('div.menu').animate({
                            left:0
                        },3000);
                        $('#arrow img').attr('src','images/hao123/left.jpg');
                    });
                });
            </script>
        </head>
        <body>
            <div class="menu">
                <ul>
                    <li><img src="images/hao123/dongman.png" /></li>
                    <li><img src="images/hao123/lol.png" /></li>
                    <li><img src="images/hao123/meng.png" /></li>
                    <li><img src="images/hao123/retie.png" /></li>
                </ul>
            </div>
    
            <div id="arrow">
                <img src="images/hao123/left.jpg" />
            </div>
        </body>
    </html>

    在jquery1.8.3正常使用,2.X版本不行,原因是toggle函数的问题

  • 相关阅读:
    CCS
    CCS
    CCS
    CCS
    CCS
    CCS
    CCS
    CCS
    Java之内部类
    Java之回调模式和ThreadLocal
  • 原文地址:https://www.cnblogs.com/leigood/p/4919808.html
Copyright © 2011-2022 走看看