一：编写js文件：
//控制层删除
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;
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 +=2;
var idx=index ;
Obj .style.zindex=idx ;
}
}
二：编写样式表文件代码如下：
body
{
font-family :宋体;
font-size :12px;
}
.blesspanel
{
position :absolute ;
width :200px;
height :auto ;
border-top-style :ridge ;
border-right-style :ridge ;
border-left-style :ridge ;
border-bottom-style :ridge ;
border-width :1pt;
}
三：建立一个web网页在HTML中编写前台代码：
<head runat="server">
<title>温馨许愿墙</title>
<s cript language ="javas cript" src ="wallcontrol.js"></s cript>
<link href ="StyleSheet.css" rel ="Stylesheet" type ="text/css" />
</head>
<body style ="background-image :url(墙.jpg)" >
<form id="form1" runat="server">
<%=allblessstring%>
</form>
四：在web中编写后台代码：
using System.Data.OleDb;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
private Random indexrandom = new Random();//许愿墙随机坐标生成
protected string allblessstring = string.Empty;//保存页面输出内容
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindPageData();
}
}
private void BindPageData()//获取许愿墙信息
{
OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|db_wall.mdb");
con.Open();
OleDbDataAdapter da = new OleDbDataAdapter("select*from tb_wall", con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0) return;
StringBuilder wall;
StringBuilder allwall = new StringBuilder();
int leftindex;
int topindex;
foreach (DataRow row in ds.Tables[0].Rows)
{
leftindex = indexrandom.Next(30, 750);//坐标随机
topindex = indexrandom.Next(30, 420);
wall = new StringBuilder();
wall.Append("<div id=\"divbless" + row["ID"].ToString() + "\" class=\"blesspanel\" ");
wall.Append("style=\"position:absolute;");
wall.Append("left:" + leftindex + "px;");
wall.Append("top:" + topindex + "px;");
wall.Append("background-color:" + row["backcolor"].ToString() + ";");
wall.Append("z-index:" + row["id"].ToString() + ";\"");
//添加鼠标事件
wall.Append("onmousedown=\"getPanelFocus(this)\">");
//添加表格
wall.Append("<table border=\"0\">");
wall.Append("<td style=\"cursor:move;\" width=\"98%\" ");
//添加鼠标事件
wall.Append("onmousedown=Down(divbless" + row["id"].ToString() + ")>");
wall.Append("第[" + row["id"].ToString() + "]条 ");
wall.Append(row["dreamdate"].ToString() + " " + "</td><td style=\"cursor:hand;\"");
wall.Append("onclick=\"ssdel()\" width=\"2%\">X</td></tr>");
wall.Append("<tr><td style=\"height:100px;padding:5px;\" colspan=\"2\">");
wall.Append(row["dream"].ToString().Trim());
//添加许愿人姓名
wall.Append("<div style=\"padding:5px;float:right;\">[" + row["dreamname"].ToString() + "] 的愿望</div></td></tr></table>");
wall.Append("</div>");
allwall.Append(wall.ToString());
}
allblessstring += allwall.ToString();
}
}