jQuery 動態添加DIV層，Ajax無刷新操作實例

2024-09-05 12:18:08

字體：大中小

來源：轉載

供稿：網友

pyramid使用jQuery動態添加多個DIV層，形成一個金字塔圖形，是Ajax層無刷新操作的好范例，對研究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="/ajaxjs/jquery1.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   class="iwvjtn8m0"   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   id="iwvjtn8m0"   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   class="iwvjtn8m0"   id="c1" class="bao" style="width: 20px"><div   id="iwvjtn8m0"   class="cnt">1</div></div>	</body></html>

上一篇：Tween 算法及緩沖特效的JavaScript代碼

下一篇：騰訊QQ和淘寶旺旺在線客服代碼