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

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

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

又一个电脑游戏被检举上热搜，原来是它

90岁《星际迷航》舰长去到太空刷新纪录 落地后他哭了

33岁女科学家研究锂电池获100万大奖 科研无关男女

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

90岁《星际迷航》舰长去到太空刷新纪录落地后他哭了

33岁女科学家研究锂电池获100万大奖科研无关男女