许愿墙的实现

看到有的应用是网上的许愿墙,就是用户写些祝福,然后象小纸条那样,粘贴在网上,好多人都写都叠在一起了，用户可以关闭每个小纸条,可以移动.实现起来其实就是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("onmousedown=/"getPanelFocus(this)/">");   ///添加表格   sbBless.Append("<table border=/"0/">");   sbBless.Append("<td style=/"cursor:move;/" width=/"98%/" ");   ///添加鼠标事件   sbBless.Append("onmousedown=Down(divBless" + row["ID"].ToString() + ")>");   sbBless.Append("第[" + row["ShowOrder"].ToString() + "]条 ");   sbBless.Append(row["CreateDate"].ToString() + " " + "</td><td style=/"cursor:hand;/" ");   sbBless.Append("onclick=/"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.onmouseup=Up; document.onmousemove=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