pyramid使用jQuery加DIV实现动态添加的金字塔结构

发布时间：2018-08-18 15:20:47 所属栏目：交互来源：站长网

导读：pyramid使用 jQuery 加DIV实现动态添加的金字塔结构，演示如何动态控制Div，这也算是前端WEB设计经常会碰到的一个实用技巧了，在不少的显示、隐藏效果中，类似本功能的实现。源码下载：http://www.veryhuo.com/down/html/29853.html 演示代码： !DOCTYPE

　　pyramid使用jQuery加DIV实现动态添加的金字塔结构，演示如何动态控制Div，这也算是前端WEB设计经常会碰到的一个实用技巧了，在不少的显示、隐藏效果中，类似本功能的实现。

　　源码下载：http://www.veryhuo.com/down/html/29853.html

　　演示代码：

<!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=gb2312" /> <title>jQuery动态添加的金字塔结构</title> <script language=javascript type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <script language=javascript type="text/javascript"> var maxid = 1; var w = 20; $(function(){ $("#addlayer").click(function(){ newid = maxid + 1; $("#c"+maxid).after("<div id="c"+newid+"" class="bao"></div>"); newdiv = $("#c"+newid); divnum = Math.pow( 2 , newid ) - 1; newwidth = divnum * w + 1; newdiv.css("width",newwidth+"px"); for(i=0;i<divnum;i++) { if(i % 2 != 1) newdiv.append("<div class="cnt">"+newid+"</div>"); else if((i+1)%4 == 0) newdiv.append("<div style="width: "+w+"px; border: 0px" class="ge"></div>"); else newdiv.append("<div style="width: "+w+"px" class="ge"></div>"); } for(i=maxid;i>0;i--) { lw = (Math.pow( 2 , newid - i)-1)*w; sw = lw + (Math.pow( 2,newid - i))*w; newwidth = newwidth - (Math.pow( 2 ,newid - i))*w ; $("#c"+i).css("width",newwidth+"px"); $("#c"+i).css("margin-left",lw+"px"); $("#c"+i).find("div[@class='ge']").each(function(i){ if(i%2==1)$(this).css("border","0px"); $(this).css("width",sw); }) } maxid = newid; }); }); </script> <style type="text/css">  </style> </head> <body> <button id=addlayer value=添加一层> 添加一层</button> <div id="c1" class="bao" style="width: 20px"> <div class="cnt">1 </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!