小白之侧拉栏

效果：

小白之侧拉栏

就是点击分享，从右边拉出一个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

秒客网

小白之侧拉栏

相关文章