许愿墙的实现

 看到有的应用是网上的许愿墙,就是用户写些祝福,然后象小纸条那样,粘贴在网上,好多人都写
都叠在一起了，用户可以关闭每个小纸条,可以移动.实现起来其实就是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() + "]条&nbsp;");
   sbBless.Append(row["CreateDate"].ToString() + "&nbsp;" + "</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>