jquery fluttering Advertising window

See some of the ads in the Web page move, you do the implementation of a bit. After all, programming is important.

Implementation ideas:

1, the Advertising window will open the timer, while moving toward the x-axis and y-axis direction of the window. When moving to the edge of the visible area range,

Move in the opposite direction. So the X-and Y-axes of a window ad should be judged 2 times respectively. Whether to the border. To the boundary, it changes the speed of operation,

Move in the opposite direction.

In this ad window, I used a picture to simulate. Specific as follows:

Html:

<src= "images/move.jpg"/>

Css:

  img{            display: block;             Position: absolute;             top: 0;             Left: 0;        }

Jq

$(function(){            varwindowheight=$ (window). Height (); varimgheight=$ ("img"). Height (); varWindowwidth=$ (window). width (); varimgwidth=$ ("img"). width (); varispeedy=0;/******* distance from the top of the window ********/           varvy=10;/*******y axis operating speed ********/           varispeedx=0;/******* distance from window to the left ********/           varvx=10;/*******x axis operating speed ********/           functionMove () {if(ispeedx>=windowwidth-imgwidth) {Ispeedx=windowwidth-imgwidth;/******* the distance from the left side of the window equals the viewable area minus the width of the ad window. Just to the bottom of the screen ********/VX=-10;/******* speed value is negative. Advertising window go back ********/                }               if(ispeedx<=0) {/********* distance Visible area is 0 * * * **/VX= 10;/*the ****** speed value is a positive number. The advertising window goes back ********/               }               if(ispeedy<0) {VY=10               }               if(ispeedy>=windowheight-imgheight) {Ispeedy=windowheight-ImgHeight; VY=-10} ispeedy+=VY; Ispeedx+=VX; $("IMG"). Animate ({top:ispeedy,left:ispeedx},100); }           varTimer=NULL; Timer=setinterval (function() {Move ()},100); })

jquery fluttering Advertising window