Ajax许愿墙,初学js,看到论坛有人做了个,自己也做一个,不过我这个程序方面写得不太好
演示地址:http://www.fairysport.com/cy/xy/
下载地址:
ajax许愿墙-随机排列.rar (130.52 KB)
新添加规则排列:
修改过,现在根据分辨率自适应规则排序
下载地址:
许愿墙Ajax-规则排列.rar (128.62 KB)
许愿墙效果图:

部分代码:
<%@ language=vbscript codepage=936 %>
<% Response.charset="GB2312" %>
<!-- #include file="conn.asp" -->
<!-- #include file="function.asp" -->
<%
Dim conn,colum,leftborder,i
call openconn()
key=rp(Request.querystring("key"))
// 取宽度
swidth=rp(Request.querystring("swidth"))-22
// 计算列数与边界
colum=swidth\250
leftborder=(swidth-colum*250)/2+5
Dim objrs,strsql
if key=Empty then
strsql="select * from xuyuan"
else
strsql="select * from xuyuan where content like '%" & key & "%'"
End if
set objrs=server.createobject("ADODB.Recordset")
objrs.open strsql,conn,1,2,1
i=1
Do while not objrs.Eof
temp1=((i-1) mod colum)*250+leftborder
temp2=((i-1)\colum)*200+50
%>
<div id='Layer<%=objrs("id") %>' class='Style<%=objrs("ys") %>' style='left:<%=temp1 %>px;top:<%=temp2 %>px;z-index:<%=-i %>' onmousedown='Move(this,event)' ondblclick='Close(<%=objrs("id") %>)'>
<p class='Num'>许愿墙<%=objrs("id") %>号<img src='images/close.gif' alt='关闭' onclick='Close(<%=objrs("id") %>)' width="11" height="11" /></p>
<p class='Detail'><img src='images/icon_<%=objrs("bq") %>.gif' width="50" height="50" />
<span class='Head'><%=objrs("friend") %></span><br /><%=objrs("content") %></p>
<p class='Sign'><%=objrs("mename") %></p>
<p class='Date'><%=objrs("addtime") %></p>
</div>
<%
i=i+1
objrs.movenext
loop
objrs.close
set objrs=nothing
call closeconn()
%>
init.js
// 定义xmlhttp
var xmlhttp = false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2){
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
}
// 读取列表
function loadtopic(){
sendplan.style.display="none";
loadbox.style.display="block";
var key=form1.key.value;
xmlhttp.open("GET","content.asp?key="+key,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
loadbox.innerHTML=xmlhttp.responseTEXT;
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send();
}
// 显示层
function sendtopic(){
sendplan.style.display="block";
loadbox.style.display="none";
form2.friend.value=""
form2.mename.value=""
form2.ys0.checked=true;
form2.bq0.checked=true;
form2.content.value="";
}
// 贴字条
function addtopic(){
var friend=form2.friend.value;
var mename=form2.mename.value;
var ys
for(var i=0;i<=5;i++){
if(form2("ys"+i).checked==true){
ys=i
break;
}
}
var bq
for(var i=0;i<=9;i++){
if(form2("bq"+i).checked==true){
bq=i
break;
}
}
var content=form2.content.value;
para="friend="+friend+"&mename="+mename+"&ys="+ys+"&bq="+bq+"&content="+content
xmlhttp.open("GET","addx.asp?"+para,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
if(xmlhttp.responseTEXT!=""){
alert(xmlhttp.responseTEXT);
}
loadtopic();
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send();
}