【前端】侧边抽屉效果
往前端走有一段时间了，平时使用到的一些焦点图，放大镜等效果都是网上直接百度拿来修改套用。至于里边的代码，那是根本看都不看的。（除了插件代码被压缩，难以阅读的原因之外，最主要还是因为看不懂。）后来开始学习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：第一次写技术博客，如有写得不好之处，敬请见谅与点出指明。
