Home
Web Front-end
JS Tutorial
Specific examples of JS random floating advertising code_javascript skills



Specific examples of JS random floating advertising code_javascript skills
May 16, 2016 pm 05:14 PM
js
random
Copy code The code is as follows:
<!--Random floating ads start--> ;
<div id="float" style="position:absolute; z-index:3;(I suggest you set this to 100 so that the floating image will not be obscured) left: 512px; width: 83px; top: 9px; height: 53px;">
<img src="piaofu.gif" width="100" height="50"> </div>
< script type="text/javascript">
<!--Random floating ads-->
var xPos=0,yPos=0;//x, y-axis coordinates
var xon= 0;//The picture moves in the x-axis direction
var yon=0;//The picture moves in the y-axis direction
var step=1; //Moving distance
var img=document.getElementByIdx_x("float ");//Picture layer
function floatP()
{
var width=document.body.clientWidth;//Browser width
var height=document.body .clientHeight;//Browser height
var Hoffset=img.offsetHeight;//Image height
var Woffset=img.offsetWidth;//Image width
img.style.left=xPos document .body.scrollLeft;//The distance between the image and the left side of the browser
img.style.top=yPos document.body.scrollTop;//The distance between the image and the top of the browser
if(yon==0 ){
yPos=yPos step;//The picture moves up and down in the y-axis direction
}else{
yPos=yPos-step;
}
if(yPos<0){// Float to the top and move down along the y-axis
yon=0;
yPos=0;
}
if(yPos>=(height-Hoffset)){//Float to the low end, Move upward along the y-axis
yon=1;
yPos=(height-Hoffset);
}
if(xon==0){//x-axis moves right
xPos=xPos step;
}else{
xPos=xPos-step;//The x-axis moves left
}
if(xPos<0){//Float to When moving to the left, move right along the x-axis
xon=0;
Move left along the x-axis
xon=1;
xPos=(width-Woffset);
}
setTimeout("floatP()",30); // Timing call.
}
window.onload=floatP();
</script>
Copy code The code is as follows:
<script>
var x = 50, y = 60 //The initial position of the floating layer corresponds to the initial X coordinate and Y coordinate of the layer respectively
var xin = true, yin = true //Determine whether the X coordinate and Y coordinate of the layer are within the control range. If xin is true, the layer moves to the right, otherwise to the left; if yin is true, the layer moves downward, otherwise upward
var step = 1 //Layer The step length of movement. The larger the value, the faster the movement speed.
var delay = 10 //The time interval for layer movement, in milliseconds. The smaller the value, the faster the movement speed.
var obj=document.getElementByIdx_x("float ") //Capture the layer with id ad as a floating target
function floatAD() {
var L=T=0 //The left boundary (L) and upper boundary (T) coordinates of the layer movement range
var R= document.body.clientWidth-obj.offsetWidth //The right boundary of the layer movement
var B = document.body.clientHeight-obj.offsetHeight //The lower boundary of the layer movement
obj.style.left = x document.body.scrollLeft //Update the X coordinate of the layer to realize movement in the Within the visible range
obj.style.top = y document.body.scrollTop //Update the Y coordinate of the layer to achieve movement in the Y-axis direction; document.body.scrollTop is the downward distance of the scroll bar in the document area , to ensure that the layer is still within the visible range when the scroll bar is pulled down
x = x step*(xin?1:-1) //Determine the movement direction of the layer on the X axis by judging the range of the layer
if (x < L) { xin = true; x = L} //Handling when the layer exceeds the left boundary
if (x > R){ xin = false; x = R} //When the layer exceeds the right boundary Processing
y = y step*(yin?1:-1) //Determine the movement direction of the layer on the Y axis by judging the range of the layer
if (y < T) { yin = true; y = T } //Handling when the layer exceeds the upper boundary
if (y > B) { yin = false; y = B } //Handling when the layer exceeds the lower boundary
}
var itl= setInterval("floatAD()", delay) //Execute the floatAD function every delay seconds
obj.onmouseover=function(){clearInterval(itl)} //The layer clears the above interval event when the mouse moves up, to achieve The effect of stopping the movement of the layer when the mouse moves up
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //The layer starts interval events when the mouse moves away to realize the layer's movement when the mouse moves up The effect of continuing to move when the mouse is removed
</script>
Note:
Insert Flash and floating ads into the web page, you will find that the floating ads float to the Flash The time will be below,
How do we solve this problem?
The rest is very simple
Just add the following statement to the flash code position
<param name="wmode" value="opaque ">
Example:
If the following is the code where the flash is located:
<object classid="clsid:D27CDB6E-AE6D- 11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="165 ">
<param name="movie" value="banner1.swf">
<param name="quality" value="high">
<param name=" menu" value="false">
<param name="wmode" value="opaque"><!--mainly this sentence-->
<embed src="banner1 .swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="165">< /embed>
</object>
<script>
var x = 50, y = 60 //The initial position of the floating layer corresponds to the initial X coordinate and Y coordinate of the layer respectively
var xin = true, yin = true //Determine whether the X coordinate and Y coordinate of the layer are within the control range. If xin is true, the layer moves to the right, otherwise to the left; if yin is true, the layer moves downward, otherwise upward
var step = 1 //Layer The step length of movement. The larger the value, the faster the movement speed.
var delay = 10 //The time interval for layer movement, in milliseconds. The smaller the value, the faster the movement speed.
var obj=document.getElementByIdx_x("float ") //Capture the layer with id ad as a floating target
function floatAD() {
var L=T=0 //The left boundary (L) and upper boundary (T) coordinates of the layer movement range
var R= document.body.clientWidth-obj.offsetWidth //The right boundary of the layer movement
var B = document.body.clientHeight-obj.offsetHeight //The lower boundary of the layer movement
obj.style.left = x document.body.scrollLeft //Update the X coordinate of the layer to realize movement in the Within the visible range
obj.style.top = y document.body.scrollTop //Update the Y coordinate of the layer to achieve movement in the Y-axis direction; document.body.scrollTop is the downward distance of the scroll bar in the document area , to ensure that the layer is still within the visible range when the scroll bar is pulled down
x = x step*(xin?1:-1) //Determine the movement direction of the layer on the X axis by judging the range of the layer
if (x < L) { xin = true; x = L} //Handling when the layer exceeds the left boundary
if (x > R){ xin = false; x = R} //When the layer exceeds the right boundary Processing
y = y step*(yin?1:-1) //Determine the movement direction of the layer on the Y axis by judging the range of the layer
if (y < T) { yin = true; y = T } //Handling when the layer exceeds the upper boundary
if (y > B) { yin = false; y = B } //Handling when the layer exceeds the lower boundary
}
var itl= setInterval("floatAD()", delay) //Execute the floatAD function every delay seconds
obj.onmouseover=function(){clearInterval(itl)} //The layer clears the above interval event when the mouse moves up, to achieve The effect of stopping the movement of the layer when the mouse moves up
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //The layer starts interval events when the mouse moves away to realize the layer's movement when the mouse moves up The effect of continuing to move when the mouse is removed
</script>
Note:
Insert Flash and floating ads into the web page, you will find that the floating ads float to the Flash The time will be below,
How do we solve this problem?
The rest is very simple
Just add the following statement to the flash code position
<param name="wmode" value="opaque ">
Example:
If the following is the code where the flash is located:
Copy code The code is as follows:
<object classid="clsid:D27CDB6E-AE6D- 11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="165 ">
<param name="movie" value="banner1.swf">
<param name="quality" value="high">
<param name=" menu" value="false">
<param name="wmode" value="opaque"><!--mainly this sentence-->
<embed src="banner1 .swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="165">< /embed>
</object>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot tools Tags

Hot Article
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use JS and Baidu Maps to implement map pan function

Recommended: Excellent JS open source face detection and recognition project

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts

How to create a stock candlestick chart using PHP and JS

How to use JS and Baidu Maps to implement map polygon drawing function

How to use JS and Baidu Map to implement map click event processing function

The difference between random and pseudo-random
