【前端】侧边抽屉效果

　　往前端走有一段时间了，平时使用到的一些焦点图，放大镜等效果都是网上直接百度拿来修改套用。至于里边的代码，那是根本看都不看的。（除了插件代码被压缩，难以阅读的原因之外，最主要还是因为看不懂。）后来开始学习javascript之后，才渐渐明白其中的代码编写。

　　（PS：一般情况下的js代码压缩都可以通过工具格式化，重新排版改善阅读。这里贴出一个我常用的在线工具网站 http://tool.chinaz.com/Tools/JsFormat.aspx）

　　

　　前段时间，在xw素材网（http://www.xwcms.net/）看见其侧边的抽屉导航效果蛮有意思的。遂决定动手写下这个效果。

　　使用定位将导航定位到侧边

　　

1 <div style="position:relative">

2 

3     <div class="elem" id="elem_1" style="top:340px;"></div>

4     <div class="elem" id="elem_2" style="top:390px;"></div>

5     <div class="elem" id="elem_3" style="top:440px;"></div>

6     <div class="elem" id="elem_4" style="top:490px;"></div>

7     <div class="elem" id="elem_5" style="top:540px;"></div>

8 </div> 

 

给点样式

1 .elem{

2         position:absolute;

3         cursor:pointer;

4         background-color:#1ABC9C;

5         margin-bottom:10px;

6         width:100px;

7         height:40px;

8         left:-50px;

9     }

事件使用了Jquery中的hover

 1 $(".elem").each(function(i,elem){

 2         var $elem = $(elem);

 3         $elem.hover(function(){

 4             $elem.stop();

 5             $elem.css({backgroundColor:"#3498DB"});

 6             $elem.animate({left: '0px'}, "250");

 7         },function(){

 8             $elem.stop();

 9             $elem.css({backgroundColor:"#1ABC9C"});

10             $elem.animate({left: '-50px'}, "250");

11         });

12         

13     })

这样就完成了最简单的一个抽屉

几行粗浅动画代码完成抽屉伸缩的效果。但是对于xw网站的伸缩抖动效果，暂时还未想到其算法实现思路。

 

 

 

 

 

PS：第一次写技术博客，如有写得不好之处，敬请见谅与点出指明。