jQuery 动态添加DIV层，Ajax无刷新操作代码

发布时间：2018-10-06 19:53:32 所属栏目：Unix 来源：站长网

导读：pyramid使用 jQuery 动态添加多个DIV层，形成一个金字塔图形，是Ajax层无刷新操作的好范例，对研究jQuery技术有帮助。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示网页演示：猛击此处运行演示： !DOCT

　　pyramid使用jQuery动态添加多个DIV层，形成一个金字塔图形，是Ajax层无刷新操作的好范例，对研究jQuery技术有帮助。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!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>pyramid使用jQuery动态添加DIV</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>
提示：可修改后代码再运行!

（编辑：清远站长网）

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