jQuery floating ad implementation code_jquery

Implementation method:

Copy code The code is as follows:

QQ Online Service

QQfsdf online service

Floating ad control code based on jquery

I recently came into contact with jquery and learned a little bit. In order to meet the needs of the boss, I made a floating layer that is static relative to the screen. I recorded the code here in case I need to use it in the future

below It is jquery code, which requires the support of jquery class library to run. When I wrote the article, the version of jquery was 1.3.2. There is no guarantee that other versions will run perfectly. The basic principles of the code are written in the comments. If you can’t understand, Then you need to supplement the basic knowledge of javascript and jquery, not too much, because I didn’t know much when I wrote this....

$(document).ready(function(){
$ (window).scroll( function() { //This function can monitor the browser scroll bar. As soon as the scroll bar moves, this function will trigger
var diffY = $(window).scrollTop(); //The page is now The distance between the position and the top of the scroll bar [scrollTop()]
var diffH = $(window).height()/4;//The distance between the floating bar and the top of the browser expected by the designer [height()], This is to keep the height of 1/4 of the page from the top of the browser. If the value of diffH is set to 0, the floating bar will fall at the top of the screen
var percent=diffY diffH; //percent will be assigned to the css "top" attribute, as the new height value of the floating bar
if(percent<0){ //Judge whether the value of percent is less than 0, round up if it is less than 0, ignore the decimal part if it is greater than 0
percent=Math .ceil(percent);
}else{
percent=Math.floor(percent); //Rounding
var v = percent "px"; //CSS attributes require a unit, here is px
$("#adright").css("top",v);//percent is assigned to the top attribute, and the browser dynamically adjusts the height of the floating bar based on this value. If you follow the code given above, This height will just keep the floating bar in the center of the screen
}
});

////////////////////// //////////////////////// The dividing line between JS and HTML/////////////////////// //////////////////////////////////////////////////

The following is the HTML code. Just put this part in the HTML page. Dynamic pages such as php, jsp, asp, etc. should be fine... I put it at the end of the page Above, if you want to place pictures, text, and flash, just place them at the XXXX position in

XXXX

. If you want to float on the left side of the page, change right:25px; to left:25px;

script Home