_javascript technique of random floating picture advertisement based on JavaScript code

There are a lot of these codes on the Web, but they may not meet the standards of the consortium, because in the head plus <! DOCTYPE html> similar to the label, the floating effect will be ineffective, the following share a standard float code, so that the need to avoid a large number of friends to change the cumbersome code.

Code One:

The code is as follows:

<! DOCTYPE html>  

The code above implements our requirement that the Red Div block be able to float randomly in the Web page and be compatible with each browser. Code implementation process Here is not much introduced, if there are any questions can post.

Code two: JS random floating advertising Code specific examples

The code is as follows:

<!--random floating advertising began--> <div id= "float" style= "position:absolute; Z-index:3 (I suggest you set this here to 100 so that the floating chart will not be obscured) left:512px; width:83px; top:9px; height:53px; " >  </div> <script" type= "Text/javascript" > <!--   Machine floating ad--> var xpos=0,ypos=0;//x,y axis coordinates var xon=0;//picture in the X axis move direction var yon=0;//picture in the Y axis move direction var step=1; Move 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;//picture height var woffset=img.offsetw idth;//picture width img.style.left=xpos+document.body.scrollleft;//picture from the left position of the browser img.style.top=ypos+
   document.body.scrolltop;//picture the top position of the browser if (yon==0) {ypos=ypos+step;//picture moves up and down in the y-axis direction}else{Ypos=ypos-step;
   if (ypos<0) {//float to the top, move down the y-axis along the y-axis yon=0;
   ypos=0;
   if (ypos>= (Height-hoffset)) {//float to the lower end, move up yon=1 along the y axis;
   Ypos= (Height-hoffset); } if (Xon==0) {//x axis moves to the right xpos=xpos+step;
   }else{the xpos=xpos-step;//x axis to the left if (xpos<0) {//move to the left side of the X axis to the right xon=0;
   xpos=0;
   if (xpos>= (Width-woffset)) {//floating to the right, move along the x-axis 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 x coordinate of the layer and the y-coordinate var Xin = true, Yin = true//judge whether the X and Y coordinates of the layer are within the control range, Xin is true the layer moves to the right Move, or left; Yin is really the layer downward move, otherwise up var step = 1//layer move steps, the greater the value the faster the move speed var delay = 10/Layer Move time interval, the unit is millisecond, the value is small move speed the faster the Var Obj=document.getelem Entbyidx_x ("float")//Capture the layer with the ID AD as the floating target function Floatad () {var l=t=0//The left boundary (L) of the move range and the upper boundary (T) coordinate var r=
Document.body.clientwidth-obj.offsetwidth//Layer Moving right boundary var B = document.body.clientheight-obj.offsetheight//layer Moving bottom boundary Obj.style.left = x + document.body.scrollLeft//update layer X coordinate to achieve motion in x-axis direction Document.body.scrollLeft the distance to the right of the scroll bar of the document area to ensure that the layer is still visible when the scroll bar is right 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 the distance that the scroll bar of 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) to determine the movement direction of the layer on the x-axis by judging the range of the layer if (x < L) {Xin = true; when x = l}//layer is out of the left boundary processing if (x > R) {xin = false; processing y = y + step* (yin?1:-1) when the layer exceeds the right boundary
The motion direction of the layer on the y-axis is determined by judging the range of the layer if (Y < T) {Yin = true; if (Y > B) {Yin = false, y = b}//layer exceeds the bottom boundary when y = T}//layer is out of bounds VaR itl= setinterval ("Floatad ()", delay)//Delay function Floatad () obj.onmouseover=function () {clearinterval (ITL)}/// The layer clears the above interval event when the mouse moves, realizes the effect that the layer stops moving when the mouse moves obj.onmouseout=function () {Itl=setinterval ("Floatad ()", delay)}//layer starts the interval event when the mouse moves away To achieve the effect of the layer moving while the mouse is moving </script>

Cloud Habitat Community Friendship remind you need to pay attention to matters:

Insert flash and floating ads in your Web page, and you'll find that when floating ads float to flash, it's down there, so how do we solve the problem?

Add the following statement to the location of the flash code

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

Cases:

If the following is the code for the location of Flash:

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--> <embed src=" banner1.swf "quality=" High " Pluginspage= "Http://www.macromedia.com/go/getflashplayer" type= "Application/x-shockwave-flash" width= "780" height = "165" ></embed> </object>