Home > Article > Backend Development > In-depth functional analysis of PHP wishing wall module_PHP tutorial
In-depth functional analysis of PHP wishing wall module_PHP tutorial
- WBOYOriginal
- 2016-07-21 15:03:041931browse
Wish Wall Module Function Analysis
1. Hotspot Technology
1. Implement drag-and-drop DOM technology to move wishing notes
The purpose of the Draggable DOM pattern is to allow the viewer to define the position of each element on the page, and just use the mouse to select the part to be moved and drag it to the new position. Pages can be customized.
DOM is the abbreviation of Document Object Model. It is an interface that is independent of browser, platform and language, allowing users to access other standard components of the page. DOM is a collection of nodes or pieces of information organized in a hierarchical structure. This hierarchy allows developers to navigate the tree looking for specific information. Analyzing this structure typically requires loading the entire document's construction hierarchy before doing any work. Since it is based on information hierarchy, DOM is said to be tree-based or object-based.
In specific implementation, the following times will be triggered:
(1)moveStart
(2)Move
(3)moveEnd
When pressed When you press the left mouse button and start moving the mouse, the moveStart event will be triggered on the dragged wish bar. Users can use the moveStart event handler to enable javaScript code when dragging begins. When the moveStart event is triggered, the Move time will always be triggered as long as the object is still being dragged. When dragging stops, the moveEnd event is triggered.
echo outputs the wish bar style layout, the code is as follows:
echo "
$id." ".$sendtime." ×
style='float:left'>
".$Picker."
/span> .$id.",".$hits.")''>[Bless you] Blessings:".$hits." QQ：".$QQ."
When the left mouse button is pressed, Apply mouse time onmousedown to trigger the Move() function
Copy code
The code is as follows:
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object, event){ //Mobile DIV wish note
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x -document.getElementById(Layer).style.pixelLeft; //Set the left border
c=event.y-document.getElementById(Layer).style.pixelTop; //Set the right border
}else if(window .captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //Return the abscissa coordinate of the time object relative to the body
c=event.layerY; / /Return the ordinate of the time object relative to the body
}
/**When the mouse clicks on the note, the note will be placed on **/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
document.all is an array variable composed of all tags in the document, including all elements in the document object. This array can Access all elements in the document.
Syntax:
document.all[i]
document.all[name]
document.all.tags[tagname]
Description:
all[] is a multifunctional array-like object that provides access to all HTML elements in the document. The all[] array originated from IE4 and has been adopted by many other browsers
all[] has been used by the standard getElementById() method and getElementByTagName() method of the Document interface and the getElementByName() method of the Document object. replace. The elements contained in
all[] preserve their original order, and if you know their exact numeric position in the array, you can extract them directly from the array. However, it is more common to use the all[] array to access elements based on their HTML attribute name or id. If the element has the specified name, you will get an array of elements sharing the same name.
document.all can determine whether the browser is IE
if(document.all ){
alert("is IE!");
}
window.captureEvents()
window.captureEvents(event1 | event2 | eventN)
captureEvents( ) method captures all event types that occur. If multiple events occur, they are separated by | vertical bars; the main events of the captureEvents() method are as follows:
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
Sample code: