小白之侧拉栏
效果：
就是点击分享，从右边拉出一个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>