[b]许愿墙模块功能分析
[/b][b]
一，热点技术
1，实现可拖放DOM技术移动许愿字条
[/b]可拖放DOM模式(Draggable DOM pattern)的宗旨在于允许浏览者自己定义页面中各元素的位置，并且，只需要用鼠标选中要移动的部分，把它拖到新的位置上，就可以定制页面。
DOM是Document Object Model文档对象模型的缩写，是一种与浏览器、平台、语言无关的接口，使用户可以访问页面其他的标准组件。DOM是以层次结构组织的节点或信息片段的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档的构造层次结构，然后才能做任何工作。由于它基于信息层次，因此DOM被认为基于树或基于对象。
[b]具体实现时以下时间会被触发：
[/b]
(1)moveStart
(2)Move
(3)moveEnd
当按下鼠标左键，开始移动鼠标时，在被拖动的许愿条上就会触发moveStart事件。用户可以使用moveStart事件处理函数在拖动开始时允许javaScript代码。当moveStart事件被触发后，Move时间会一直触发，只要对象还在被拖动，就一直触发。当拖动停止时，则触发moveEnd事件。
echo输出许愿条样式布局，代码如下：
[url=#] </DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
当按下鼠标左键时，应用鼠标时间onmousedown触发Move()函数
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object,event){ //移动DIV许愿字条
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft; //设置左边框
c=event.y-document.getElementById(Layer).style.pixelTop; //设置右边框
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //返回时间对象相对于本体的横坐标
c=event.layerY; //返回时间对象相对于本体的纵坐标
}
/**实现鼠标单击字条时，字条置上**/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
document.all是文档中所有标签组成的一个数组变量，包括了文档对象中的所有元素，这个数组可以访问文档中的所有元素。
[b]语法：
[/b]
document.all[i]
document.all[name]
document.all.tags[tagname]
[b]说明：
[/b]all[]是一个多功能的类似数组的对象，它提供了对文档中所有HTML元素的访问。all[]数组源自于IE4并已经被很多其他浏览器采用
all[]已经被Document接口的标准的getElementById()方法和getElementByTagName()方法以及Document对象的getElementByName()方法所取代。
all[]包含的元素保存了最初的顺序，如果你知道他们在数组中的确切数字化位置，可以直接从数组中提取他们。然而，更为常见的是使用all[]数组，根据他们的HTML属性name或id来访问元素。如果元素拥有指定的name,将得到共享同一名称的元素的一个数组。
document.all可以判断浏览器是否是IE
[url=#] </DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
[b]6,解析IP获取用户所在城市
[/b]在PHP中，使用PHP预定义变量$_SERVER['REMOTE_ADDR']获取客户端的IP地址。然后将IP按照通用的算法将其解析成一个数字串(每个城市都有一个对应的数字串)，通过这个数字串来确定查询用户所在的城市名称。
在数据库中，IP区域的存储时一个数字串，并非实际的IP地址，这时就需要对客户端或服务器端的IP转换成指定数字串的格式，从而进行地域信息的查询。
$ip=getenv('REMOTE_ADDR'); //获取客户端IP地址
/********解释IP区域***********/
$cip=cip($ip);
$csql="select * from tb_ip where (ip1<'".$cip."' and ip2>'".$cip."') or (ip1=ip2 and ip2='".$cip."')";
//执行查询
$res = $DB->fetch_one_array($csql);
$cip1=$res['country'];
if($cip1==""){
$cip1="IP不详";
}
[b]二,实现过程
1，双击许愿字条，该字条置顶显示，并屏蔽整个页面
[/b]当用户双击许愿字条后，该许愿字条将置顶显示，同时屏蔽整个页面，以达到突出显示的效果。
[b](1)控制DIV突显效果，首页设置一个隐藏的DIV，ID名称为“shadeDiv”，代码如下
[/b]<div style="display:none;" id="shadeDiv" onclick="Hide();"></div>
[b](2)应用Javascript脚本自定义一个Hide()函数，通过设置DIV的显示属性display设置为空，从而隐藏DIV[/b]，代码如下：
function Hide(){
document.getElementById("shadeDiv").style.display = "none";
iLayerMaxNum = iLayerMaxNum+2;
}
[b](3)在CSS样式表中设置隐藏DIV的样式。代码如下：
[/b]#shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE浏览器下滤镜效果，兼容性不好
[b](4)接下来，双击已经设计好的许愿字条DIV图层，代码如下：
[/b]ondblclick=Show(".$id.",'shadeDiv')
[b](5)自定义一个函数show()，用来控制背景的效果。
[/b]
function Show(n,divName){
document.getElementById(n).style.zIndex = iLayerMaxNum+1;
document.getElementById(divName).style.display = "block";
document.getElementById(divName).style.zIndex = iLayerMaxNum;
var size = getPageSize(); //设置隐藏区域的面积，这里是获取许愿墙显示区域的面积，即本例中设置滤镜的面积
document.getElementById(divName).style.width = size[0]+"px";
document.getElementById(divName).style.height = size[1]+"px";
}
[b](6)设置纸条显示的区域,这里得到的仅仅是数字
[/b]
function getPageSize(){
var w =document.body.clientWidth;
var h= document.body.clientHeight;
arrayPageSize = new Array(w,h);
return arrayPageSize;
}
[b]2,应用Jpgraph图形类库实现3D饼形图表按地域统计分析许愿比率,实现过程如下：
[/b](1)应用浮动框架技术实现不同类别下的地域统计分析结果，每一个黄颜色的版块分别是一个浮动框架.浮动框架布局的代码如下：
<!----------------------------应用3D饼形图按地域统计分析”全部“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_all.php" style="HEIGHT:290px;VISIBILITY:inherit;WIDTH:1004px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”亲情类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_relative.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”爱情类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_love.php" style="HEIGHT:90px;VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX: 3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”友情类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_friend.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”自己类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_self.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”奥运会类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_olympic.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------应用3D饼形图按地域统计分析”汶川类“许愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_wch.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
[b](2)应用3D饼形图动态统计分析全部区域的许愿比率
[/b]首先应用Jpgraph类库实现图表分析，需要应用include语句引用jpgraph.php文件。代码如下：
<?php
include("global.php"); //链接数据库源文件
include("jpgraph/jpgraph.php"); //引用图表分析类文件
?>
绘制饼形图需要引用jpgraph_pie.php文件。绘制3D效果的饼形图需要创建PiePlot3D类对象，PiePlot3D类在Jpgraph_pie3d.php中定义，需要应用include语句调用该文件。代码如下：
<?php
include("jpgraph/jpgraph_pie.php"); //引用饼形图类文件
include_once("jpgraph/jpgraph_pie3d.php"); //引用3D饼图PiePlot3D对象所在的类文件
?>
创建graph对象，生成一个990x276像素大小的画布，设置统计图所在画布的位置以及画布的阴影。设置标题的字体以及图例的字体。设置饼形图所在画布的位置以及半径，将绘制的3D饼形图添加到图像中。
<?php
$graph = new PieGraph(990,276); //创建画布
$graph->SetShadow(); //设置阴影
$graph->title->Set("应用3D饼形图统计分析全部区域许愿比率"); //设置标题名称
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题的字体加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //设置饼形图文字的字体
$size=0.5; //设置饼形图的半径
/***********************统计全部许愿比率*************************/
//创建饼形图对象
$p0= new PiePlot3D($arraynum0); //创建饼形图对象
$p0->SetLegends($arraycip0);
$p0->SetSize($size); //设置饼形图的大小
$p0->SetCenter(0.45,0.48); //设置饼形图的坐标位置
$p0->SetLegends($arraycip0); //设置城市名称
$p0->value->SetFont(FF_FONT0); //设置字体
$p0->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题字体加粗
/*************************************************************/
$graph->Add($p0); //添加3D饼形图到图像中
$graph->Stroke(); //输出图像
?>
[b](3)应用3D饼形图动态统计分析”亲情类“的许愿比率。[/b]其实现方法与获取全部的许愿比率的方法基本类似，不同的是这里在检索亲情类许愿人数时设置了where查询条件。另外在设置饼形图的半径和位置上稍微有变化。
<?php
include("global.php"); //链接数据库文件
include ("jpgraph/jpgraph.php"); //引用图表分析类文件
include ("jpgraph/jpgraph_pie.php"); //引用饼形图类文件
include_once ("jpgraph/jpgraph_pie3d.php"); //引用3D饼图PiePlot3D对象所在的类文件
/***********************统计亲情类别*************************/
$sql2="select distinct(count(cip)) as num,cip from tb_wishes where wishsort='亲情' group by cip ";
$DB->query($sql2); //动态统计亲情类许愿
$res2=$DB->get_rows_array($sql2); //生成二维数组
$rows_count2=count($res2); //统计二维数组的数量
$arraynum2=array(); //声明城市”亲情类“许愿总数数组
$arraycip2=array(); //声明”亲情类“城市名称数组
//解析数组
for($k=0;$k<$rows_count2;$k++){
array_push($arraynum2,$res2[$k][num]); //输出城市的许愿数量
array_push($arraycip2,$res2[$k][cip]); //输出城市名称
}
/*************************************************************/
//创建画布
$graph = new PieGraph(320,246); //创建画布
$graph->SetShadow(); //设置阴影
$graph->title->Set("统计分析全部区域的[ 亲情类 ] 许愿比率"); //设置标题名称
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题的字体加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //设置饼形图文字的字体
$size=0.3; //设置饼形图的半径
/***********************统计亲情许愿比率*************************/
$p= new PiePlot3D($arraynum2); //创建饼形图对象
$p->SetLegends($arraycip2); //设置城市名称
$p->SetSize($size); //设置饼形图的大小
$p->SetCenter(0.45,0.55); //设置饼形图的坐标位置
$p->value->SetFont(FF_FONT0); //设置字体
$p->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题字体加粗
/*************************************************************/
$graph->Add($p); //添加3D饼形图到图像中
$graph->Stroke(); //输出图像
?>
[b]3,许愿墙列表,许愿墙字条高级搜索功能的实现
[/b]为了便于访客能更清晰地查看各种不同类别的许愿字条，本模块设计了爱墙列表和许愿字条高级搜索功能。其中，爱墙列表时在默认状态下检索全部的许愿字条，而高级搜索功能是按照访客设置的一定的查询条件来检索与之匹配的许愿字条。
设计爱墙列表及许愿字条高级搜索的表单元素如下：
<table width="1004" height="25" border="0" cellpadding="0" cellspacing="0">
<form name="form" method="get" action="">
<tr>
<td align="center" bgcolor="#339933">请输入查询条件：
<input type="text" name="content1" size="30" class="inputs">
<select name="select">
<option value="奥运会">奥运会</option>
<option value="汶川">汶川</option>
<option value="爱情">爱情</option>
<option value="亲情">亲情</option>
<option value="友情">友情</option>
<option value="自己">自己</option>
<option value="全部" selected="selected">全部</option>
</select>
<input type="submit" name="submit" value="检索许愿" class="btn_search">
(支持多条件查询，如：爱墙号、许愿人、许愿内容等)
</td>
</tr>
</form>
</table>
[b]4,许愿墙显示效果如图：
[/b][img]http://files.jb51.net/file_images/article/201306/201306251012282.png[/img]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
