A flexible and practical example of page advertising
At present, many home page popular placed a floating layer of advertising images (usually located in the lower right of the page), displayed on the text layer, when the page scroll up and down, the ad image does not scroll with the page, it can always maintain a fixed position in the window. This procedure is an example of this advertising effect, and in the original based on the addition of the drag function, if you want to look at the content of the page is just the advertising image occlusion, you can drag the advertising image to other locations. and resolved the image drag the mouse button click action and the execution of the ADS Image link Click action between the conflict. Click on the advertising image directly to perform the image link, while the image dragged during the mouse press and release action does not trigger the ad link. After this improvement, users will feel more convenient and natural when browsing your pages.
The program is written in JavaScript scripting language, not complex, in order to save the article space, it is not here to explain the principle of the program, but in the following program documents to give detailed comments. Readers will understand how to do this by reading the annotation instructions, and learn how to locate images on the screen, drag images, and so many dynamic HTML statements in a programming way. If you want to use this program directly, just copy the corresponding content of the demo page to the corresponding location on your page and use it.
The program document is divided into two parts, Dragtest.htm is a demo of the main page program, Mydrag.js is called by the main page of the external script program file, also used a demo image file: Http://edu.cnzz.cn/NewsInfo/myimage.gif. The home page files, script files, and image files are placed in the same directory, and are available for normal use. The specific program documentation reads as follows:
(i) • Simplified homepage Demo Documentation: dragtest.htm
<title> Drag Advertising Image demo page </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" >
<!--
/* Set an ID style, the name contains drag string, for the program to identify the drag components used. */
#elDRAGone {
Position:absolute;
left:600; top:300;
color:red;
width:120;
height:60;
Z-index:3;
}
-->
</STYLE>
</HEAD>
<body bgcolor= "#FFFFFF" style= "Font-size:9pt;color: ' #555500 ';" >
<!--Specify the previously set ID style in the properties of the div tag. -->
<!--Note the event statements in <a> tags,-->
<!--is called by it to perform the discriminant function of the link action, if the return value is "false",-->
<!--does not perform a link action, whereas a link action is performed. -->
<div id= "Eldragone" ><a href= "http://www.sohu.com" > <a></DIV>
<script language= "JavaScript" >
/* Continuously output multiple text strings for the page demo. */
for (i=0;i<50;i++) {
document.write ("This is a" drag AD image "demo program.) <br><br> ");
}
</SCRIPT>
<script language= "JavaScript" src=mydrag.js>
/* Call external script file for image Drag control program * *
/* Note that the call to this script should be placed in the lower part of the body area * *
</SCRIPT>
</body>
(ii) • External scripting documents called by the main page: Mydrag.js
External script Control program starts///////
Program Name: Mydrag.js///////
A variable that records the vertical scrolling position of a page.
lastscrolly=0;
Calibrate the position of the image on the page in the program.
With (Document.all.elDRAGone) {
Style.pixeltop=offsettop;
Style.pixelleft=offsetleft;
}
A function that locates an image on the page.
function position_img () {
Calculates the offset of a page's vertical scrolling.
Diffy = document.body.scrolltop-lastscrolly;
Saves this page scrolling position.
Lastscrolly=document.body.scrolltop;
Move the image to the original window position.
Document.all.elDRAGone.style.pixelTop + = Diffy;
}
Creates a variable that records the initial position of the image to calculate whether the image has been dragged.
originx=originy=0;
If the image is dragged, the value of the Offset_pixel variable is greater than 0.
offset_pixel=0;
Records the current coordinate values of the image in the document.
CurrentX = CurrentY = 0;
The variable that holds the dragged object.
Whichel = null;
OnMouseDown the image grab function of the event call.
function Grabel () {
Only the left mouse button is allowed to drag!
if (Event.button!=1) {return;}
Save the mouse-click object into the Whichel variable.
Whichel=event.srcelement;
Determines whether a drag object is available.
while (WhichEl.id.indexOf ("DRAG") ==-1) {
Whichel=whichel.parentelement;
if (whichel==null) {return;}
}
Record the initial window position when the image is crawled.
Originx=event.clientx;
Originy=event.clienty;
Set the drag discriminant variable to a value of 0.
offset_pixel=0;
Calibrate the location of the image on the document.
Whichel.style.pixelleft=whichel.offsetleft;
Whichel.style.pixeltop=whichel.offsettop;
Records the current position coordinates of the image relative to the document.
Currentx=event.clientx+document.body.scrollleft;
Currenty=event.clienty+document.body.scrolltop;
}
OnMouseMove the image movement function of the event call.
function Moveel () {
Returns if no dragged object is crawled.
if (whichel==null) {return;}
If you drag an image, the variable is offset_pixel
Give a value greater than 0 to mark that the image has been dragged.
So that the image does not perform the linking function after the drag completes.
Offset_x=math.abs (Event.clientx-originx);
Offset_y=math.abs (Event.clienty-originy);
offset_pixel=offset_x+offset_y;
Calculates the position of the newly-dragged document coordinate.
Newx=event.clientx+document.body.scrollleft;
Newy=event.clienty+document.body.scrolltop;
Calculates the deviation between the current position and the initial position before the drag.
Distancex=newx-currentx;
Distancey=newy-currenty;
Update the initial position variable with the current location.
CURRENTX=NEWX;
Currenty=newy;
The position where the image is actually moved.
WhichEl.style.pixelLeft +=distancex;
WhichEl.style.pixelTop +=distancey;
Event.returnvalue=false;
}
The image placement function of the onmouseup function call.
Indicates the end of the drag process.
function Dropel () {
Whichel=null;
}
Determines whether or not an image is dragged to perform
An image-related link.
function If_link () {
if (offset_pixel>0)
If the image is dragged, the function returns False,
Do not perform image-related links.
return false;
Else
Otherwise, the true value is returned and the link to the image is executed.
return true;
}
Change the handle function that can drag the object as a cross cursor.
function Curel () {
Over_element=event.srcelement;
while (Over_Element.id.indexOf ("DRAG") ==-1) {
Over_element=over_element.parentelement;
if (over_element==null) {return;}
}
Event.srcElement.style.cursor = "Move";
}
The following is the mouse event handle set in the document.
Document.onmousedown = Grabel;
Document.onmousemove = Moveel;
Document.onmouseup = Dropel;
Document.onmouseover = Curel;
The image move function is called periodically, at 1 seconds.
Action = Window.setinterval ("position_img ()", 1000);
External script control program end//////////////////
This program in IE 4.0 version of the browser to use the adoption.
Article Signature: one Sail
Author name: Chaolili.
E-mail: cnyf@21cn.com
"This article copyright belongs to the author and the Osso net jointly owns, if needs to reprint, please indicate the author and the origin"
