小白之侧拉栏

小白之侧拉栏

效果：

就是点击分享，从右边拉出一个div，再次点击回去。功能很简单。

步骤：

1.引入jquery。

 <script src="jquery/jquery-3.1.0.min.js"></script>

2.创建按钮和div。

 <button class="buts">分享</button>
 <div class="divs"></div>

3.css，主要为按钮和div的定位。

    button{position: fixed;bottom: 100px;right: 0;background: #d58512;width: 30px;padding: 5px;font-size: 20px;}
    div{position: fixed;bottom:0;right:-250px;background: #fff;width: 238px;height:150px;padding: 5px;font-size: 20px;border: 1px solid #ccc}

4.js

 $(function () {
            $(".buts").click(function () {
                if($(this).css("right")=="0px"){
                $(this).animate({right:'250px'},'slow');
                $(".divs").animate({right:'0px'},'slow');
            }else {
                $(this).animate({right:'0px'},'slow');
                $(".divs").animate({right:'-250px'},'slow');
            }})
        })

html代码展示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery/jquery-3.1.0.min.js"></script>
    <style>
        button{position: fixed;bottom: 100px;right: 0;background: #d58512;width: 30px;padding: 5px;font-size: 20px;}
        div{position: fixed;bottom:0;right:-250px;background: #fff;width: 238px;height:150px;padding: 5px;font-size: 20px;border: 1px solid #ccc}
    </style>
</head>
<body>
    <button class="buts">分享</button>
    <div class="divs"></div>
    <script>
        $(function () {
            $(".buts").click(function () {
                if($(this).css("right")=="0px"){
                    $(this).animate({right:'250px'},'slow');
                    $(".divs").animate({right:'0px'},'slow');
                }else {
                    $(this).animate({right:'0px'},'slow');
                    $(".divs").animate({right:'-250px'},'slow');
                }})
        })
    </script>
</body>
</html>

View Code