許願牆的實現

看到有的應用是網上的許願牆,就是用戶寫些祝福,然後象小紙條那樣,粘貼在網上,好多人都寫都疊在一起了，用戶可以關閉每個小紙條,可以移動.實現起來其實就是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