JS random floating advertising code concrete example
- 2020-03-29 23:51:02
- OfStack
<!-- Random float AD begins -->
<div id="float" style="position:absolute; z-index:3;( I would suggest that you set this to zero 100 So that the float diagram is not 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 coordinates
var xon=0;//The picture moves in the X-axis
var yon=0;//The picture moves in the Y-axis
var step=1; //Mobile distance
var img=document.getElementByIdx_x("float");//The picture layer
function floatP()
{
var width=document.body.clientWidth;//Browser width
var height=document.body.clientHeight;//Browser height
var Hoffset=img.offsetHeight;//Picture height
var Woffset=img.offsetWidth;//Image width
img.style.left=xPos+document.body.scrollLeft;//The image is located to the left of the browser
img.style.top=yPos+document.body.scrollTop;//The image is located at the top of the browser
if(yon==0){
yPos=yPos+step;//The picture moves up and down the y axis
}else{
yPos=yPos-step;
}
if(yPos<0){//It goes to the top, it moves down the Y-axis
yon=0;
yPos=0;
}
if(yPos>=(height-Hoffset)){//I'm going to go to the low end, and I'm going to go up the y axis
yon=1;
yPos=(height-Hoffset);
}
if(xon==0){//The X-axis is moving to the right
xPos=xPos+step;
}else{
xPos=xPos-step;//The X-axis is moving to the left
}
if(xPos<0){// The left edge The X-axis is moving to the right
xon=0;
xPos=0;
}
if(xPos>=(width-Woffset)){// To the right The X-axis is moving to the left
xon=1;
xPos=(width-Woffset);
}
setTimeout("floatP()",30);//Timed call.
}
window.onload=floatP();
</script>
<script>
var x = 50,y = 60 //The initial position of the floating layer corresponds to the initial X and Y coordinates 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. Yin for true layer moves down, otherwise up
var step = 1 //The bigger the step size, the faster the layer moves
var delay = 10 //The time interval of layer movement, measured in milliseconds, the smaller the value, the faster the movement
var obj=document.getElementByIdx_x("float") //Capture the layer with id AD as the 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 //Right edge of layer movement
var B = document.body.clientHeight-obj.offsetHeight //The lower boundary of layer movement
obj.style.left = x + document.body.scrollLeft //Update the x-coordinate of the layer to realize the movement in the X-axis direction; Document.body.scrollleft is the distance to the right of the scroll bar in the document area to ensure that the layer is still visible when the scroll bar is pulled right
obj.style.top = y + document.body.scrollTop //Update the y-coordinate of the layer to realize the movement in the Y-axis direction; Document.body.scrolltop is the distance that the scroll bar in the document area is pulled down to ensure that the layer is still visible when the scroll bar is pulled down
x = x + step*(xin?1:-1) //The motion direction of the layer on the X-axis is determined by the range of the layer
if (x < L) { xin = true; x = L} //The processing when the layer exceeds the left boundary
if (x > R){ xin = false; x = R} //The handling of layers beyond the right boundary
y = y + step*(yin?1:-1) //The motion direction of the layer on the Y-axis is determined by the range of the layer
if (y < T) { yin = true; y = T } //The handling of layers when they exceed the upper boundary
if (y > B) { yin = false; y = B } //The handling of layers when they exceed the lower boundary
}
var itl= setInterval("floatAD()", delay) //The floatAD function executes every delay second
obj.onmouseover=function(){clearInterval(itl)} //The layer clears the interval event when the mouse is moved up to achieve the effect that the layer stops moving when the mouse is moved up
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //The layer begins to interval events when the mouse is moved away to achieve the effect that the layer continues to move when the mouse is moved away
</script>
Note:
Insert Flash and floating ads into your web page, and you'll notice that when floating ads float to Flash they'll be below,
So how do we solve this problem,
The rest is simple
Add the following statement to the location of the flash code
< Param name = "wmode" value = "opaque" >
Ex. :
If the following is the code where 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>