jQuery 动态添加DIV层，Ajax无刷新操作实例

2020-01-27 13:44:04

字体：大中小

来源：转载

供稿：网友

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 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>

上一篇：腾讯QQ和淘宝旺旺在线客服代码

下一篇：Tween 算法及缓冲特效的JavaScript代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注