JS details based on jquery Web page Floating Ads window

Reprinted from: http://blog.csdn.net/u011427035/article/details/51072116

Floating window CSS Style

<style>           { position: absolute; z-index: 999900; display: none; }          { display: block;} {vertical-align: bottom;}             /* a combination of IMG browser By default there will be a few pixels blank, here can eliminate the white space */   </style>  

HTML Content Write yourself

<div id= "Floadad" class= "Floadad" >      <a class= "Close" href= "javascript:void ();" style= "color:red" >x off </a>      <a class= "item" title= ' First Party construction culture festival ' href= "http://unsun.net" target= "_blank" >          </a>  </div>  

JS Code

Ad floating window function Floatad (selector) {var obj = $ (selector); if (Obj.find (". Item"). Length = = 0) return;//If there is no content, do not execute var windowheight = $ (window). height ();//Browser height var windoww      Idth = $ (window). width ();//Browser width var DirX = -1.5;//Each horizontal float direction and distance (in px), positive to right, negative to left, if larger, it will look less fluent, but you may need this effect under certain requirements var DirY = -1;//Each vertical float direction and distance (unit: PX), positive downward, negative upward, if the bigger the words will look less fluent, but under certain requirements you may need this effect var delay = 30;// Period of time interval of execution, in milliseconds obj.css ({left:windowwidth/2-obj.width ()/2 + "px", TOP:WINDOWHEIGHT/2-Obj.height ()/2 + "p X "});//Set the element to the middle of the page obj.show ();//The element is hidden by default, avoid the previous code changes position visual abrupt, change position and then show out var handler = setinterval (move, delay);//Regular Executes, returns a value that can be used to cancel the periodic execution of Obj.hover (function () {/////mouse over time pause, continue clearinterval (handler) on departure;//Cancel Periodic      Execute}, function () {handler = SetInterval (move, delay);        });      Obj.find (". Close"). Click (function () {//Bind Close button event close ();      }); $ (window). Resize (function () {//When changing the window size, regain the browser size to ensure that it does not cross the bounds (floating out of the browser viewable range) or the range of drift is less than the new size WindowHeight = $ (window). height ();//Browser Height windowwidth =      $ (window). width ();//browser width}); function Move () {///perform functions periodically so that elements move var currentpos = Obj.position ();//Get the current position, this is the function of jquery, see: Http://hemin.cn/jq/posi                                 tion.html var nextposx = currentpos.left + dirx;//Next horizontal position var Nextposy = currentpos.top + diry;//Next Vertical position              if (Nextposx >= windowwidth-obj.width ()) {//This section is unique to this site, when floating to the right, close the floating window, if you do not need to delete          Close ();  } if (nextposx <= 0 | | nextposx >= windowwidth-obj.width ()) {//If the left side is reached, or to the right, it is changed to the opposite direction DirX = DirX * -1;//change direction nextposx = Currentpos.left + dirx;//for the sake of bounds, re-get Next position} if (Nextposy < = 0 | |                          Nextposy >= windowheight-obj.height ()-5) {//If the top is reached, or the bottom is reached, the opposite direction is changed.         DirY = DirY * -1;//change direction nextposy = Currentpos.top + diry;//for the sake of bounds, regain the next position } obj.css ({left:nextposx + "px", Top:nextposy + "px"});//move to next position} function close () {//stop floating and destroy          Floating window clearinterval (handler);      Obj.remove ();   }  }

Call:

Floatad ("#floadAD"); // called  

JS details based on jquery Web page Floating Ads window