java许愿墙_许愿墙的实现

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

都叠在一起了，用户可以关闭每个小纸条,可以移动.实现起来其实就是javascript

首先是把用户填写的留言都保存到数据库,然后其实就是在一个HTML页面中,

用一个字符串很长的,把内容输出,即

/// 祝福板的坐标的随机生成器

///

private Random indexRandom = new Random();

///

/// 保存页面输出的内容

///

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();

///构建一个

sbBless.Append("

///添加样式

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("

sbBless.Append("

///添加鼠标事件

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

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

sbBless.Append(row["CreateDate"].ToString() + " " + "

sbBless.Append("οnclick=\"ssdel()\" width=\"2%\">×

");

sbBless.Append("

");

sbBless.Append(row["Bless"].ToString());

///添加用户名称

sbBless.Append("

" + row["Username"].ToString() + "

");

sbBless.Append("

");

///追加到输出字符串中

sbAllBless.Append(sbBless.ToString());

}

///将当前祝福板的内容添加到输出字符串中

AllBlessString += sbAllBless.ToString();

}

关键就是每个小纸条DIV的设计

接着就是用javasrcipt实现每个小纸条的移动和关闭

//-- 控制层删除 -->

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;

}

}