简单许愿树的实现

简单许愿树的实现lt Page Language C AutoEventWir true CodeFile Default aspx cs Inherits Default gt

大家好,我是讯享网,很高兴认识大家。
<%@ 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="http://www.w3.org/1999/xhtml">
<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">
          <div style="background-image: url(Bgw.jpg);width:1000px;height:700px;margin-top:10px;">
           <%= AllBlessString %>
          </div>
    </form>
</body>
</html>

讯享网


讯享网

讯享网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(); //创建一个<div></div>,用来作为许愿墙 wall.Append("<div id=\"divBless" + 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("οnmοusedοwn=\"getPanelFocus(this)\">"); //添加表格 wall.Append("<table border=\"0\">"); wall.Append("<td style=\"cursor:move;\" width=\"98%\" "); //添加鼠标事件 wall.Append("οnmοusedοwn=Down(divBless" + row["ID"].ToString() + ")>"); wall.Append("第[" + row["ID"].ToString() + "]条 "); wall.Append(row["dreamDate"].ToString() + " " + "</td><td style=\"cursor:hand;\" "); wall.Append("οnclick=\"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("<div style=\"padding:5px;float:right;\">【" + row["dreamName"].ToString() + "】的愿望</div></td></tr></table>"); wall.Append("</div>"); //追加到输出字符串中 allWall.Append(wall.ToString()); } //将当前DIV许愿墙的内容添加到输出字符串中 AllBlessString += allWall.ToString(); } }

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;}

讯享网// 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.ο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; } }


小讯
上一篇 2025-01-09 18:52
下一篇 2025-02-07 10:51

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/85545.html