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:

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 Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use JS and Baidu Maps to implement map pan function How to use JS and Baidu Maps to implement map pan function Nov 21, 2023 am 10:00 AM

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

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

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 Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

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 PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

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 create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

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 Maps to implement map polygon drawing function Nov 21, 2023 am 10:53 AM

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 How to use JS and Baidu Map to implement map click event processing function Nov 21, 2023 am 11:11 AM

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

The difference between random and pseudo-random The difference between random and pseudo-random Oct 10, 2023 am 09:27 AM

The difference between random and pseudo-random

See all articles