许愿墙的实现

 看到有的应用是网上的许愿墙,就是用户写些祝福,然后象小纸条那样,粘贴在网上,好多人都写

都叠在一起了，用户可以关闭每个小纸条,可以移动.实现起来其实就是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 0/">");

   sbBless.Append("<td style=/"cursor:move;/" width=/"98%/" ");

   ///添加鼠标事件

   sbBless.Append("οnmοusedοwn=Down(divBless" + row["ID"].ToString() + ")>");

   sbBless.Append("第[" + row["ShowOrder"].ToString() + "]条&nbsp;");

   sbBless.Append(row["CreateDate"].ToString() + "&nbsp;" + "</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>