基于jQuery的简易手风琴切换插件
2013-12-14 19:49
543 查看
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>基于jQuery的简易手风琴切换插件@Mr.Think</title> <style type="text/css"> .demotitle{font-size:18px;line-height:2.4} .iaccordion{position:relative;width:780px;height:300px;overflow:hidden} .iaccordion img{display:block;width:480px;height:300px;} .iaccordion02{position:relative;width:100%;height:300px;overflow:hidden} .iaccordion02 .item{width:70%;height:265px;padding:15px;border-left:5px solid #9bcbff;background-color:#f5f5f5} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://files.cnblogs.com/kb0662/jQuery.easing.min.js"></script> <script type="text/javascript"> ;(function($){ $.fn.iAccordion=function(iSet){ var self=this; iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{}); /* * Type: 鼠标事件类型,mouseover,click,mouseleave等 * Select: 选择器,用以获取需要切换的元素集合 * Cur: 默认展开元素的索引 * InitInterval: 初始化手风琴效果动画间隔时间 * Interval: 鼠标事件动画间隔时间 * Easing: 动画效果,需要jQuery.easing支持,参数可参考jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/ */ var item,boxW,selectW,animateW,sIndex,animateL; $(self).each(function(){ //初始化容器样式 $(this).css({'position':'relative','overflow':'hidden'}); item=$(this).find(iSet.Select); //初始化切换元素样式 item.css({'position':'absolute','left':0,'top':0}); boxW=$(this).outerWidth(); selectW=item.outerWidth(); animateW=(boxW-selectW)/(item.size()-1); //初始化元素排列并为元素data一个索引值 item.each(function(i){ $(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing); $(this).data('index',i); }).on(iSet.Type,function(e){//绑定鼠标事件 //获取当前元素索引值 sIndex=$(this).data('index'); //鼠标事件动画,通过判断元素索引值与当前元素索引值的大小关系动画显示当前元素并动画排列 item.each(function(n){ n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n; $(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing); }); }).eq(iSet.Cur).trigger(iSet.Type); }); } })(jQuery); $(function(){ //图片切换 $('.iaccordion').iAccordion({ Easing:'easeOutBounce' }); //容器类切换 $('.iaccordion02').iAccordion({ Select:'.item', Easing:'easeOutQuint' }); }); </script> </head> <body> <div id="demo"> <h2 class="demotitle">图片类应用</h2> <div class="iaccordion"> <a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_01.jpg" alt="" /></a></li> <a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_02.jpg" alt="" /></a></li> <a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_03.jpg" alt="" /></a></li> <a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_04.jpg" alt="" /></a></li> </div> <h2 class="demotitle" style="margin-top:20px">容器类应用</h2> <div class="iaccordion02"> <div class="item"> 容器1 </div> <div class="item"> 容器2 </div> <div class="item"> 容器3 </div> <div class="item"> 容器4 </div> <div class="item"> 容器5 </div> </div> </div> </body> </html>
相关文章推荐
- 基于jquery的simpleValidate简易验证插件
- 基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
- 基于jQuery的对象切换插件:soChange 1.5 (点击下载)
- 10 款基于 jQuery 的切换效果插件推荐
- 基于jQuery开发的手风琴插件 jquery.accordion.js
- 基于jQuery开发的手风琴插件 jquery.accordion.js
- 基于jQuery插件实现环形图标菜单旋转切换特效
- 基于jQuery淡入淡出可自动切换的幻灯插件
- 基于jQuery图片切换实现预加载插件,左右带控制
- 基于jQuery实现Accordion手风琴自定义插件
- 一款基于jQuery的图片下滑切换焦点图插件
- 基于jQuery图像碎片切换效果插件FragmentFly
- 10 款基于 jQuery 的切换效果插件推荐
- 10 款基于 jQuery 的切换效果插件推荐
- multiSteps 基于Jquery的多步骤滑动切换插件
- jQuery手风琴图切换特效插件
- 基于jQuery淡入淡出可自动切换的幻灯插件(2011.01.11更新)