深入PHP许愿墙模块功能分析_php许愿墙实训报告资源-CSDN文库

68 浏览量 2020-10-27 04:57:21 上传评论 1 收藏 153KB PDF 举报

资源详情

资源评论

深入深入PHP许愿墙模块功能分析许愿墙模块功能分析

本篇文章是对PHP实现许愿墙的模块功能进行了详细的分析介绍，需要的朋友参考下

许愿墙模块功能分析许愿墙模块功能分析

一，热点技术一，热点技术

1，实现可拖放，实现可拖放DOM技术移动许愿字条技术移动许愿字条

可拖放DOM模式(Draggable DOM pattern)的宗旨在于允许浏览者自己定义页面中各元素的位置，并且，只需要用鼠标选中要

移动的部分，把它拖到新的位置上，就可以定制页面。

DOM是Document Object Model文档对象模型的缩写，是一种与浏览器、平台、语言无关的接口，使用户可以访问页面其他

的标准组件。DOM是以层次结构组织的节点或信息片段的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析

该结构通常需要加载整个文档的构造层次结构，然后才能做任何工作。由于它基于信息层次，因此DOM被认为基于树或基于

对象。

具体实现时以下时间会被触发：具体实现时以下时间会被触发：

(1)moveStart

(2)Move

(3)moveEnd

当按下鼠标左键，开始移动鼠标时，在被拖动的许愿条上就会触发moveStart事件。用户可以使用moveStart事件处理函数在

拖动开始时允许javaScript代码。当moveStart事件被触发后，Move时间会一直触发，只要对象还在被拖动，就一直触发。当

拖动停止时，则触发moveEnd事件。

echo输出许愿条样式布局，代码如下：

复制代码代码如下:

echo "

<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z."' id='".$id."' onmousedown='Move(this,event)'

ondblclick=Show(".$id.",'shadeDiv')>

<TBODY>

<TR>

<TD>

<span class='Num' >爱墙编号:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>

</DIV>

</TD>

</TR>

<TR>

<TD>

<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>

</DIV>

<H2><span id='authorSample'>".$author."</span></H2>

</DIV>

<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福气:<span id='fq_id".$id."'>".$hits."</span> <span

id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='单击与他/她交谈'

target='_blank'>".$QQ."</a></span>

</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是文档中所有标签组成的一个数组变量，包括了文档对象中的所有元素，这个数组可以访问文档中的所有元素。

语法：语法：

document.all[i]

document.all[name]

document.all.tags[tagname]

说明：说明：

all[]是一个多功能的类似数组的对象，它提供了对文档中所有HTML元素的访问。all[]数组源自于IE4并已经被很多其他浏览器

采用

all[]已经被Document接口的标准的getElementById()方法和getElementByTagName()方法以及Document对象的

getElementByName()方法所取代。

all[]包含的元素保存了最初的顺序，如果你知道他们在数组中的确切数字化位置，可以直接从数组中提取他们。然而，更为常

见的是使用all[]数组，根据他们的HTML属性name或id来访问元素。如果元素拥有指定的name,将得到共享同一名称的元素的

一个数组。

document.all可以判断浏览器是否是IE

复制代码代码如下:

if(document.all){

alert("is IE!");

}

window.captureEvents()

window.captureEvents(event1 | event2 | eventN)

captureEvents()方法捕获所有发生的事件类型，如果有多个事件发生，则用|竖线隔开；captureEvents()方法主要事件如下：

Event.ABORT

Event.BLUR

Event.CHANGE

Event.CLICK

Event.DBLCLICK

Event.DRAGDROP

Event.ERROR

Event.FOCUS

Event.KEYDOWN

Event.KEYPRESS

Event.KEYUP

Event.LOAD

Event.MOUSEDOWN

Event.MOUSEMOVE

Event.MOUSEOUT

Event.MOUSEOVER

Event.MOUSEUP

Event.MOVE

Event.RESET

Event.RESIZE

Event.SELECT

Event.SUBMIT

Event.UNLOAD

示例代码：示例代码：

复制代码代码如下:

<html>

<head>

<title>Using window.captureEvents</title>

<!--

var counter = 0;

window.captureEvents(Event.CLICK)

window.onclick = myClickHandler;

function myClickHandler(){

window.document.myForm.myText.handleEvent;

}

function changeText(){

document.myForm.myText.value = counter++;

}

-->

</script>

</head>

<body>

</form>

</body>

</html>

当鼠标移动时，触发moveStart()函数，代码如下：

复制代码代码如下:

function moveStart(d){

if(Layer!=''){ //如果图层不为空

if(document.all){

document.getElementById(Layer).style.left=event.x-b; //设置左边距

document.getElementById(Layer).style.top=event.y-c; //设置右边距

}else if(window.captureEvents){

document.getElementById(Layer).style.left=(d.clientX-b)+"px";

document.getElementById(Layer).style.top=(d.clientY-c)+"px";

}

应用DOM方法(document对象的getElementById方法)获取包含许愿字条layer层左边距和上边距的距离。b和c分别表示获取

Layer层的横纵坐标。

clientX：：检索与窗口客户区域有关的鼠标坐标的x坐标，属性为只读，没有默认值。

clientY：：检索与窗口客户区域有关的鼠标光标的y坐标，属性为只读，没有默认值。

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft

各浏览器通用属性：各浏览器通用属性：

screenX:鼠标在显示屏幕上的坐标。

clientX:鼠标在页面显示区域的坐标。

特有属性：特有属性：(注：IE和FF的定位有个1px的差别，实际上，IE的定位从0开始，FF的定位从1开始，FF永远会比IE大1px，需要

根据实际情况处理。)

pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的

属性。

layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从

border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。

offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较

好用，用来判断鼠标点在一个元素中的哪个位置很方便，FF没有直接替换的属性。

x：：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离

该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样，FF中严格按上述说明

执行，但是在IE6/7中，这个属性返回该DOM对象在其直接父对象中的位置，但是IE8改正了这个问题，不过IE8又有了一个新

问题，其他的浏览器都是从父对象的内容区域的左上角开始定位，IE8确是从父元素的border的左上角开始定位，由于测试环

境为IETester中的IE8，不能排除是IETester的问题。

当鼠标抬起时，触发当鼠标抬起时，触发moveEnd()函数，代码如下：函数，代码如下：

复制代码代码如下:

function moveEnd(d){

if(Layer!=''){ //如果layer图层不为空

剩余10页未读，继续阅读

评论收藏

内容反馈

深入PHP许愿墙模块功能分析

评论0

最新资源

深入PHP许愿墙模块功能分析

评论0

最新资源

相关推荐

PHP书上的许愿墙项目源码

php许愿墙

基于php实现的许愿墙

php许愿墙系统

许愿墙代码实现报告

深入PHP购物车模块功能分析(函数讲解,附源码)

许愿墙模块

许愿墙模块 jsp java

许愿墙模块.zip

JSP许愿墙模块

php许愿墙源码

php许愿墙完整源代码

php原生许愿墙代码

PHP+MYSQL 许愿墙

php许愿墙项目源码

ASP.NET许愿墙模块源码.rar

原生php最新版许愿墙许愿网留言板程序源码

php许愿墙+mysql

PHP毕业设计——许愿墙升级版（有源码）

基于PHP+MySQL+Apache在线考试管理系统（附源码）

php用户管理系统（简单）

php+mysql期末作业小项目

基于PHP民宿管理系统设计与实现（完整源码+数据库+文档）

ChatGPT商业版网站源码，php编译，支持收费功能

彩票网站源码_php彩票源码程序,彩票系统全套源码php

PHP-在校学生成绩管理系统-源码

自主研发的软著申请代码文档整理输出工具