Of Stack

Based on JavaScript code to achieve random floating image advertising

  • 2020-11-20 05:58:32
  • OfStack

There's a lot of code on the web that doesn't necessarily conform to W3C because you put it in the header < !DOCTYPE html > After similar tags, the floating effect will be invalid. The following is a standard floating code to save the friends in need from a lot of tedious code modification.

Code 1:

The code is as follows: 


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> Floating AD code </title>
<style type="text/css">
#thediv
{
 z-index:100; 
 position:absolute; 
 top:43px; 
 left:2px;
 height:100px;
 width:100px; 
 background-color:red;
}
</style>
<script type="text/javascript"> 
var xPos=300; 
var yPos=200; 
var step=1; 
var delay=8; 
var height=0; 
var Hoffset=0; 
var Woffset=0; 
var yon=0; 
var xon=0; 
var pause=true; 
var interval; 
function changePos() 
{ 
 width=document.documentElement.clientWidth; 
 height=document.documentElement.clientHeight; 
 Hoffset=thediv.offsetHeight; 
 Woffset=thediv.offsetWidth; 
 thediv.style.left=(xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px"; 
 thediv.style.top=(yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px"; 
 if(yon) 
 {
  yPos=yPos+step;
 } 
 else 
 {
  yPos=yPos-step;
 } 
 if(yPos<0) 
 {
  yon=1;
  yPos=0;
 } 
 if(yPos>=(height-Hoffset)) 
 {
  yon=0;
  yPos=(height - Hoffset);
 } 
 if(xon) 
 {
  xPos=xPos + step;
 } 
 else 
 {
  xPos=xPos - step;
 } 
 if(xPos < 0) 
 {
  xon = 1;
  xPos = 0;
 } 
 if(xPos >= (width - Woffset)) 
 {
  xon = 0;
  xPos = (width - Woffset); 
 } 
} 
function start() 
{ 
 thediv.visibility="visible"; 
 interval=setInterval('changePos()',delay); 
} 
function pause_resume() 
{ 
 if(pause) 
 { 
  clearInterval(interval); 
  pause = false;
 } 
 else 
 { 
  interval = setInterval(changePos,delay); 
  pause = true; 
 } 
}
window.onload=function()
{
 thediv.style.top=yPos; 
 start(); 
}
</script> 
</head> 
<body> 
<div id="thediv"></div> 
</body> 
</html>

The above code implements our requirements, the red div block can be randomly floating in the web page, and compatible with each browser. The implementation process of the code is not introduced here, if there is any question you can comment.

Code 2: concrete example of JS random floating AD 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 be 100 , so that the float 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 advertisement  -->
  var xPos=0,yPos=0;//x,y Axis coordinates 
  var xon=0;// In the picture x Direction of axial movement 
  var yon=0;// In the picture y Direction of axial movement 
  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 at the top of the browser 
   if(yon==0){
   yPos=yPos+step;// In the picture y It's moving up and down 
   }else{
   yPos=yPos-step;
   }
   if(yPos<0){// Float to the top, along the edge y Axial movement down 
   yon=0;
   yPos=0;
   }
   if(yPos>=(height-Hoffset)){// To the lower end, along the edge y Axial movement 
   yon=1;
   yPos=(height-Hoffset);
   }
   if(xon==0){//x We're going to move to the right 
   xPos=xPos+step;
   }else{
   xPos=xPos-step;//x Axial shift to the left 
   }
   if(xPos<0){// Drift to the left edge x We're going to move to the right 
   xon=0;
   xPos=0;
   }
   if(xPos>=(width-Woffset)){// Drift to the right edge x Axial shift to the left 
   xon=1;
   xPos=(width-Woffset);
   }
   setTimeout("floatP()",30);// Timed call. 
  }
  window.onload=floatP();
</script>

The code is as follows: 


<script>
var x = 50,y = 60 // The initial position of the floating layer, corresponding to the initial position of the layer respectively X Coordinates and Y coordinates 
var xin = true, yin = true // Judge layer X Coordinates and Y Whether the coordinates are within the control range, xin Is the true layer moves to the right, or to the left; yin Move down for true layer, otherwise move up 
var step = 1 // The greater the value, the faster the layer moves 
var delay = 10 // The time interval between layer moves , In milliseconds, the smaller the value, the faster it moves 
var obj=document.getElementByIdx_x("float") // capture id for ad The layer serves as a floating target 
function floatAD() {
var L=T=0 // The left boundary of the layer's range of movement (L) And the upper boundary (T) coordinates 
var R= document.body.clientWidth-obj.offsetWidth // Layer moves to the right of the boundary 
var B = document.body.clientHeight-obj.offsetHeight // The lower boundary of the layer movement 
obj.style.left = x + document.body.scrollLeft // Update layer X Coordinates, implementation X Axial motion; 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 to the right 
obj.style.top = y + document.body.scrollTop // Update layer Y Coordinates, implementation Y Axial motion; document.body.scrollTop Is the distance 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) // Determine the layer in by judging the scope of the layer X The direction of motion along the axis 
if (x < L) { xin = true; x = L} // Layer processing beyond the left boundary 
if (x > R){ xin = false; x = R} // Layer processing beyond the right boundary 
y = y + step*(yin?1:-1) // Determine the layer in by judging the scope of the layer Y The direction of motion along the axis 
if (y < T) { yin = true; y = T } // Layer processing beyond the upper boundary 
if (y > B) { yin = false; y = B } // The handling of layers beyond the lower boundary 
}
var itl= setInterval("floatAD()", delay) // every delay Seconds to perform 1 time floatAD function 
obj.onmouseover=function(){clearInterval(itl)} // The layer clears the above interval events as it moves over the mouse, enabling the layer to stop moving when it moves over the mouse 
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} // The layer begins to interval events when the mouse is moved, enabling the layer to continue to move when the mouse is moved 
</script>

This site friendship remind you to pay attention to:

Insert Flash and float ads into the web page, and you'll see that when float ads float to Flash they will be at the bottom. How do we solve this problem

Just add the following statement to the flash code 


<param name="wmode" value="opaque">

Ex. :

If the following is the code where flash is located:

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"><!-- This is the main 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: