<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>许愿墙</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/iutil.js"></script>
<script type="text/javascript" src="js/idrag.js"></script>
<style type="text/css">
/* 页面基本样式 */
body, td, input, select {
font-family:Arial;
font-size:12px;
}
/* 愿望div样式 */
.wish {
width: 120px;
padding:10px;
font-size:12px;
border: 1px solid #333;
position: absolute;
display:none;
cursor:default;
}
/* 许愿时间样式 */
.wishtime {
text-align:center;
padding:5px;
}
/* 许愿人样式 */
.username {
text-align:right;
padding: 5px;
color:#663333;
}
/* 关闭文字样式 */
.close {
color:#FFF;
cursor:pointer;
}
</style>
<script type="text/javascript">
var maxzIndex = 999999; //最大Z坐标
var currzIndex = 1; //当前Z坐标
var xMin = 10; //X坐标最小值
var xMax = 300; //X坐标最大值
var yMin = 100; //Y坐标最小值
var yMax = 300; //Y坐标最大值
var msMin = 1000; //显示毫秒数最小值
var msMax = 3000; //显示毫秒数最大值
//色彩数组
var colorArray = ["#FF9999","#FF6633","#FFCC00","#99CC66","#00CCCC","#0099CC","#CC99FF"];
//获取随机显示毫秒
function getRanMS() {
return getRanNum(msMin, msMax);
}
//获取随机横坐标
function getRanX() {
return getRanNum(xMin, xMax);
}
//获取随机纵坐标
function getRanY() {
return getRanNum(yMin, yMax);
}
//通用获取随机数的函数
function getRanNum(minVal, maxVal) {
return Math.round(Math.random() * (maxVal - minVal)) + minVal;
}
//页面加载完毕自动初始化函数
$(function() {
//为选择颜色列表项赋值背景色
$("option").each(
function(i) {
$(this).background(colorArray[i]);
}
);
//向服务器发送请求获取许愿信息
$.getJSON("wishes.jsp", //服务器页面地址
{
action: "getWishes" //action参数
},
function(json) {
//遍历结果数组
$(json).each(
function(i) {
buildWish(json[i]); //建立愿望节点
}
);
}
);
});
//点击“关闭”后隐藏愿望
function hideWish(src) {
$(src).parent().slideUp();
}
//发送新愿望给服务器
function sendWish() {
var username = $("#username").val(); //获取发送用户姓名
var wish = $("#wish").val(); //获取愿望内容
var color = $("#color").val(); //获取颜色
if (username != "" && wish != "") {
document.forms[0].reset(); //表单重置
$.post("wishes.jsp", //服务器页面地址
{
action: "sendWish", //action参数
username: username, //许愿人参数
wish: wish, //愿望参数
color: color //颜色参数
},
function(time) {
//将新愿望各参数组成json对象
var json = {
username: username,
wishtime: time,
wish: wish,
colorsuit:color
};
buildWish(json); //建立愿望节点
}
);
} else {
alert("许愿人和愿望都需要填写内容。");
}
}
//在页面建立愿望
function buildWish(json) {
var x = getRanX(); //随机生成X坐标
var y = getRanY(); //随机生成Y坐标
var ms = getRanMS(); //随机生成显示时间
//创建愿望节点
var divNode = $(document.createElement("div"));
divNode
//添加样式
.addClass("wish")
//追加许愿时间
.append("<div class='wishtime'>" +
json.wishtime.substr(0,16) +
"</div>")
//追加愿望信息
.append(json.wish)
//追加许愿人
.append("<div class='username'>" +
json.username +
"</div>")
//追加关闭功能
.append("<div class='close' onclick='hideWish(this)'>关闭</div>")
//将节点写入body
.appendTo("body")
//设定鼠标点击事件
.mousedown(
function() {
this.style.zIndex = currzIndex++; //Z坐标增加1
})
//设置可拖拽
.Draggable(
{
zIndex:maxzIndex //拖拽过程中的Z坐标值
})
//设置left位置
.left(x+"px")
//设置top位置
.top(y+"px")
//设置背景颜色
.background(colorArray[json.colorsuit-1])
//使用随机生成的毫秒数淡入
.fadeIn(ms);
}
</script>
</head>
<body>
<h1>许愿墙</h1>
<form>
<select id="color">
<option value="1">红</option>
<option value="2">橙</option>
<option value="3">黄</option>
<option value="4">绿</option>
<option value="5">青</option>
<option value="6">蓝</option>
<option value="7">紫</option>
</select>
许愿人：<input type="text" id="username">
愿望：<input type="text" id="wish">
<input type="button" value="许愿" onclick="sendWish()">
</form>
</div>
</body>
</html>
xuyuan.rar_XUYUAN_ajax_javascript 拖动_许愿墙
版权申诉
181 浏览量
2022-09-19
13:33:15
上传
评论
收藏 18KB RAR 举报
xuyuan.rar （6个子文件） 
9.4 
wishes.jsp 5KB js jquery.js 19KB idrag.js 16KB iutil.js 5KB
wishes.html 6KB
www.pudn.com.txt 218B资源评论
