微信扫一扫打赏支持

js进阶 13-8 jquery如何实现侧边栏

js进阶 13-8 jquery如何实现侧边栏

一、总结

一句话总结：先是把侧边栏设置为left为-100px，隐藏起来，jquery自定义动画animate里面的改变元素的距左边的宽度left，slide系列动画是改变元素的高；$(this).animate({left:'0px'})；$(this).animate({left:'-100px'})；

 

 

二、如何实现侧边栏

1、相关知识

侧边栏

案例描述：具有滑动隐藏显示效果的侧边栏。

 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6   <meta charset="UTF-8">
 7   <title>演示文档</title>
 8   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9   <style type="text/css">
10       .nav{
11        width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #eee;position: absolute; top: 50px;left: -100px;
12       }
13       .nav span{display: block; background: orange;width: 30px;height: 90px;border-radius: 0 4px 4px 0;font-size: 20px;line-height: 30px;position: relative;left: 100px;top:100px;}
14   </style>
15 </head>
16 <body>
17   <div class="nav">
18     <span>分享到</span>
19     <ul>
20       <li>QQ</li>
21       <li>微信</li>
22       <li>微博</li>
23       <li>......</li>
24     </ul>
25   </div>
26   <script>
27     $('.nav').mouseenter(function(){
28       $(this).animate({left:'0px'})
29     })
30     $('.nav').mouseleave(function(){
31       $(this).animate({left:'-100px'})
32     })
33   </script>
34 </body>
35 </html>

 

 

 

 
posted @ 2018-07-19 22:49  范仁义  阅读(780)  评论(0)  编辑  收藏  举报