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>


Related articles: