Jquery学习插件之手风琴
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手风琴</title> <link href="css/accordion.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/accordion.js"></script> <script> $(function(){ //插件的应用 $("#ul1").accordion(); }); </script> </head> <body> <ul id="ul1"> <li>111111111<span>第一块</span></li> <li>22222222222<span>第二块</span></li> <li>33333333333<span>第三块</span></li> <li>444444444<span>第四块</span></li> <li>555555555<span>第五块</span></li> </ul> </body> </html>
js部分
/** * Created by Iecy on 14-9-5. * 手风琴插件 */ ;(function($){ $.fn.extend({ accordion:function(options){ var defaults = { width:"800px", spanWidth:20, hideWidth:700 }; var options = $.extend(defaults,options); var obj = $(this); //当前对象 var obj_children = obj.children();//当前对象下的子级(第一级) var obj_childern_len = obj_children.length;//子级的个数 var aLeft = []; obj_children.each(function(){ var index = $(this).index(); $(this).css({zIndex:obj_childern_len-index,left:options.spanWidth*index+"px"});//初始化各个li层级和位置 aLeft[index] = $(this).position().left;//保存下各个手风琴键的位置 }); obj_children.mouseover(function(){ var index = $(this).index(); obj_children.each(function(){ if($(this).index()<index){ obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]-options.hideWidth+"px"}); }else{ obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]+'px'}); } }); }); } }); })(jQuery);
css部分
* {margin:0; padding:0; list-style:none;} /*展开:720px 收起:20px*/ #ul1 {width:800px; height:400px; border:1px solid red; margin:10px auto; position:relative; overflow:hidden;} #ul1 li {width:720px; height:400px; background:#CCC; position:absolute;} #ul1 li span {position:absolute; top:0; right:0; background:#C66; width:18px; height:398px; border:1px solid black; color:white; text-align:center;}
个人练习,路过下就可以了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥