简单许愿树的实现
首先新建一个db_wall.mdb,然后建立表tb_wall
数据库截图
然后输入些数据
下面我们开始写代码
写个前台的default.x
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="">
<head runat="server">
<title>许愿墙</title>
<script language="javascript" src="js_wallcontrol.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<p style="background-image: url(bgw.jpg);width:1000px;height:700px;margin-top:10px;">
<%= allblessstring %>
</p>
</form>
</body>
</html>
后台代码default.aspx.cs：
using system;
using system.data;
using system.configuration;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
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 (!page.ispostback)
{
bindpagedata();
}
}
//获取许愿墙信息
private void bindpagedata()
{
//链接数据库，不多说
oledbconnection con = new oledbconnection(@"provider=microsoft.jet.oledb.4.0;data source=" + server.mappath("db_wall.mdb"));
con.open();
oledbdataadapter dap = new oledbdataadapter("select * from tb_wall", con);
dataset ds = new dataset();
dap.fill(ds);
if (ds == null || ds.tables.count <= 0 || ds.tables[0].rows.count <= 0) return;
stringbuilder wall;
stringbuilder allwall = new stringbuilder();
int lefindex;
int topindex;
//创建单个许愿信息
foreach (datarow row in ds.tables[0].rows)
{ //产生位置的随机起始位置
lefindex = indexrandom.next(30, 750);
topindex = indexrandom.next(30, 420);
wall = new stringbuilder();
//创建一个<p></p>，用来作为许愿墙
wall.append("<p id=\"pbless" + row["id"].tostring() + "\" class=\"blesspanel\" ");
//添加样式
wall.append("style=\"position:absolute;");
wall.append("left:" + lefindex + "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(pbless" + row["id"].tostring() + ")>");
wall.append("第[" + row["id"].tostring() + "]条 ");
wall.append(row["dreamdate"].tostring() + " " + "</td><td style=\"cursor:hand;\" ");
wall.append("onclick=\"ssdel()\" width=\"2%\">×</td></tr>");
wall.append("<tr><td style=\"background-image: url(bg.gif);height:100px;padding:5px;\" colspan=\"2\">");
wall.append(row["dream"].tostring().trim());
//添加许愿人姓名
wall.append("<p style=\"padding:5px;float:right;\">【" + row["dreamname"].tostring() + "】的愿望</p></td></tr></table>");
wall.append("</p>");
//追加到输出字符串中
allwall.append(wall.tostring());
}
//将当前div许愿墙的内容添加到输出字符串中
allblessstring += allwall.tostring();
}
}
css代码：
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;}
js代码：
// jscript 文件
//-- 控制层删除(删除许愿墙) -->
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;
}
}
以上代码都比较简单，这里就不多说了。
看看效果图吧!
这里只做了许愿树的显示，写愿望没写，以后有时间在做吧。。
摘自 爱智旮旯