看到有的应用是网上的许愿墙,就是用户写些祝福,然后象小纸条那样,粘贴在网上,好多人都写
都叠在一起了，用户可以关闭每个小纸条,可以移动.实现起来其实就是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("onmousedown=\"getPanelFocus(this)\">");
///添加表格
sbBless.Append("
");
sbBless.Append(" ///添加鼠标事件
sbBless.Append("onmousedown=Down(divBless" + row["ID"].ToString() + ")>");
sbBless.Append("第[" + row["ShowOrder"].ToString() + "]条 ");
sbBless.Append(row["CreateDate"].ToString() + " " + " | sbBless.Append("onclick=\"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实现每个小纸条的移动和关闭
本文作者:佚名 来源:http://www.cnblogs.com/jackyrong/
CIO之家 www.ciozj.com 微信公众号:imciow