jQuery

来源：互联网发布：苹果手机截图软件编辑：程序博客网时间：2024/06/09 20:07
点击按钮滑动显示侧边导航栏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <!-- CSS部分 -->    <style media="screen">    li {        list-style: none;    }    .side_open {        position: fixed;        top: 20%;        right: 0;        width: 218px;        height: 574px;        background-color: pink;    }    .side_btn {        position: absolute;        top: 20px;        left: -30px;        width: 30px;        height: 140px;        background-color: green;    }    .side_btn li {        width: 30px;        height: 140px;        position: absolute;        top: 0;        left: 0;        background-color: red;        display: none;    }    .side_btn li:first-child {        display: block;    }    </style></head><body>    <!-- HTML部分 -->    <div class="side_open" id="side_open">        <a href="javascript:void(0);" class="side_btn" id="side_btn">            <ul>                <li>展开</li>                <li>收起</li>            </ul>        </a>    </div>     <!-- JS部分 -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    <script type="text/javascript">    $(document).ready(function(){    var isHiden = true; /*控制切换菜单*/    $('#side_btn').click(function(){        if(isHiden){            $('#side_open').animate({right:'-=217px'});//菜单块向右移动        }else{            $('#side_open').animate({right:'+=217px'}); //菜单块向左移动        }        isHiden = !isHiden;    });// isHiden只是返回部件的隐藏属性，并不能表示部件当前的真实状态。比如A部件有个子部件B，而A处于隐藏状态，子部件B必然也不可见，但子部件B本身的isHiden还是为false。    // 信号量    var index = 0;    // 更改按钮文字の点击事件    $('#side_btn').click(function(){        //防流氓点击        if($('#side_btn ul li').is(":animated")){            return;        }        // 老文字淡出        $('#side_btn ul li').eq(index).fadeOut(0,function(){            // 信号量            index --;            if(index < 0){                index = 1;            }            // 新文字淡入            $('#side_btn ul li').eq(index).fadeIn(0);        });    });});    </script></body></html>
阅读全文
0 0