看到有的应用是网上的许愿墙,就是用户写些祝福,然后象小纸条那样,粘贴在网上,好多人都写都叠在一起了,用户可以关闭每个小纸条,可以移动.实现起来其实就是javascript 首先是把用户填写的留言都保存到数据库,然后其实就是在一个HTML页面中, 用一个字符串很长的,把内容输出,即
/// 祝福板的坐标的随机生成器
/// </summary>
private Random indexRandom = new Random();
/// <summary>
/// 保存页面输出的内容
/// </summary>
protected string AllBlessString = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
BindPageData();
}
}
private void BindPageData()
{ ///获取祝福信息
BlessWall bless = new BlessWall();
DataSet ds = bless.GetBlesses();
if(ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0) return;
StringBuilder sbBless;
StringBuilder sbAllBless = new StringBuilder();
int lefIndex;
int topIndex;
///显示祝福板,并显示祝福信息
foreach(DataRow row in ds.Tables[0].Rows)
{ ///产生位置的随机起始位置
lefIndex = indexRandom.Next(30,750);
topIndex = indexRandom.Next(30,420);
sbBless = new StringBuilder();
///构建一个<div></div>,用来显示祝福板
sbBless.Append("<div id=/"divBless" + row["ID"].ToString() + "/" class=/"BlessPanel/" ");
///添加样式
sbBless.Append("style=/"position:absolute;");
sbBless.Append("left:" + lefIndex + "px;");
sbBless.Append("top:" + topIndex + "px;");
sbBless.Append("background-color:" + row["BackColor"].ToString() + ";");
sbBless.Append("z-index:" + row["ID"].ToString() + ";/" ");
///添加鼠标事件
sbBless.Append("οnmοusedοwn=/"getPanelFocus(this)/">");
///添加表格
sbBless.Append("<table border=/"0/">");
sbBless.Append("<td style=/"cursor:move;/" width=/"98%/" ");
///添加鼠标事件
sbBless.Append("οnmοusedοwn=Down(divBless" + row["ID"].ToString() + ")>");
sbBless.Append("第[" + row["ShowOrder"].ToString() + "]条 ");
sbBless.Append(row["CreateDate"].ToString() + " " + "</td><td style=/"cursor:hand;/" ");
sbBless.Append("οnclick=/"ssdel()/" width=/"2%/">×</td></tr>");
sbBless.Append("<tr><td style=/"height:100px;padding:5px;/" colspan=/"2/">");
sbBless.Append(row["Bless"].ToString());
///添加用户名称
sbBless.Append("<div style=/"padding:5px;float:right;/">" + row["Username"].ToString() + "</div></td></tr></table>");
sbBless.Append("</div>");
///追加到输出字符串中
sbAllBless.Append(sbBless.ToString());
}
///将当前祝福板的内容添加到输出字符串中
AllBlessString += sbAllBless.ToString();
}
关键就是每个小纸条DIV的设计接着就是用javasrcipt实现每个小纸条的移动和关闭
<script language="javascript" type="text/javascript"> //-- 控制层删除 --> function ssdel() { if(event) { lObj = event.srcElement; while (lObj && lObj.tagName != "DIV") lObj = lObj.parentElement ; } var id = lObj.id document.getElementById(id).removeNode(true); } //-- 控制层删除 --> //-- 控制层移动 --> var Obj='' var index=10000; //z-index的值; document.οnmοuseup=Up; document.οnmοusemοve=Move; function Down(Object) { Obj = Object.id; document.all(Obj).setCapture(); pX = event.x - document.all(Obj).style.pixelLeft; pY = event.y - document.all(Obj).style.pixelTop; } function Move() { if(Obj != '') { document.all(Obj).style.left = event.x - pX; document.all(Obj).style.top = event.y - pY; } } //-- 控制层移动 --> function Up() { if(Obj != '') { document.all(Obj).releaseCapture(); Obj=''; } } ///获取祝福板的焦点; function getPanelFocus(obj) { if(obj.style.zIndex!=index) { index = index + 2; var idx = index; obj.style.zIndex=idx; } } </script>
转载自http://www.cnblogs.com/jackyrong/archive/2008/04/21/1164160.html