【前端】侧边抽屉效果

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

转载于:https://www.cnblogs.com/Dvinson/p/3593503.html