仿jQuery手风琴特效,原创版,求大大们帮小弟我精简上代码
仿jQuery手风琴特效,原创版,求大大们帮我精简下代码
看到Jquery手风琴效果很爽,可是不会用.悲催,只能自己写了
写了好久。现在就做成这样了.但是如果代码扩展了就又要重新设计了
求大大们帮我精简下代码,做成可以任意扩展的代码,如删除一个li或者增加一个都不会有bug
一些是所有代码,可以复制运行看一看效果
原创:http://www.zhjie.net
------解决方案--------------------
不错啊 你想怎么扩展?
------解决方案--------------------
稍微改了下 但是还是有点小BUG 判断2个对象是否相等 用了这个$(this).html() 这里如果li节点都一样的话就会出现问题
看到Jquery手风琴效果很爽,可是不会用.悲催,只能自己写了
写了好久。现在就做成这样了.但是如果代码扩展了就又要重新设计了
求大大们帮我精简下代码,做成可以任意扩展的代码,如删除一个li或者增加一个都不会有bug
一些是所有代码,可以复制运行看一看效果
- JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script src="file:///E|/Code_source/Web/jquery/js/jquery-1.7.2.js"></script> </head> <style> .c{ width:740px; overflow:hidden; } .main{ width:4000px; } li{ float:left; width:50px; list-style:none; } li div{ width:500px; height:200px; } .red{ background:red; } .yellow{ background:yellow; } .blue{ background:blue; } .black{ background:black; } .green{ background:green; } </style> <body> <div class="c"> <ul class="main"> <li style="width:500px"><div class="red"></div></li> <li><div class="yellow"></div></li> <li><div class="blue"></div></li> <li><div class="black"></div></li> <li><div class="green"></div></li> </ul> </div> <script> $("li").click(function(e){ var allWidth="50px"; var thisWidth="500px"; //$("li").css("width", allWidth); //$(this).css("width", thisWidth); var index=$(this).index(); $("li").stop(); if(index==$("li").length-1||index==$("li").length-2){ $(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500); } else if(index==$("li").length-3){ $(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500).nextUntil("li:eq("+index+")").next().nextAll("li:!eq("+index+")").animate({"width":allWidth},500); } else if(index==0){ $(this).animate({"width":thisWidth},500).nextAll().animate({"width":allWidth},500); } else{ $(this).animate({"width":thisWidth},500).prev().animate({"width":allWidth},500).next().nextAll().animate({"width":allWidth},500); } }); </script> </body> </html> 麻烦各位了
原创:http://www.zhjie.net
------解决方案--------------------
不错啊 你想怎么扩展?
------解决方案--------------------
稍微改了下 但是还是有点小BUG 判断2个对象是否相等 用了这个$(this).html() 这里如果li节点都一样的话就会出现问题
- CSS code
//去掉li div的宽度 li div{ height:200px; }
------解决方案--------------------
写得不错,不过jquery UI好像有这样的效果。