在浏览器中漂浮的广告图片，当图片漂浮至浏览器边界时，自动向相反方向继续漂浮

一、在浏览器中漂浮的广告图片，当图片漂浮至浏览器边界时，自动向相反方向继续漂浮，如页面效果。

二、实现思路
1、在页面上放入一个层，并在层中插入一张图片。

2、在JavaScript代码中，分别定义图片所在层在X轴、Y轴方向移动的距离，在X轴、Y轴移动的方向，以及图片移动的速度。

3、在图片漂浮函数中，使用clientWidth和clientHeight计算出浏览器的宽度和高度，使用图片的width和height计算图片的宽度和高度，然后使用层的left和top属性设置图片所在层在页面中的坐标。

4、图片在移运的过程中需要判断当前图片的移动方向，如果图片是在X轴、Y轴的正方向移动则坐标要加上移动的距离，如果在负方向移动则坐标要减去移动的距离。

5、图片在移动的过程中需要判断图片是否移动到浏览器的边界，根据当前图片在X轴、Y轴的坐标分别加上图片的宽度和高度是否大于浏览器的宽度和高度，如果大于则图片向相反的方向移动。

三、实现漂浮文告的JavaScript源代码

//定义全局变量

var moveX = 0; //X轴方向移动的距离

var moveY = 0; //Y轴方向移动的距离

var step = 1; //图片移动的速度

var directionY = 0; //设置图片在Y轴的移动方向

var directionX = 0; //设置图片在X轴的移动方向

function changePos(){

var img = document.getElementById("float"); //图片所在层ID

var width = document.documentElement.clientWidth; //浏览器宽度

var height = document.documentElement.clientHeight; //浏览器高度

var imgHeight=document.getElementById("floatImg").height; //漂浮图片高度

var imgWidth=document.getElementById("floatImg").width; //漂浮图片宽度

img.style.left =parseInt(moveX + document.documentElement.scrollLeft)+"px"; //漂浮图片距浏览器左侧位置

img.style.top = parseInt(moveY + document.documentElement.scrollTop)+"px"; //漂浮图片距浏览器顶端位置

if (directionY==0){

moveY = moveY + step; //漂浮图片在Y轴方向上向下移动

}

else{

moveY = moveY - step; //漂浮图片在Y轴方向上向上移动

}

if (moveY < 0) { //如果漂浮图片漂到浏览器顶端时，设置图片在Y轴方向上向下移动

directionY = 0;

moveY = 0;

}

if (moveY >= (height - imgHeight)) { //如果漂浮图片漂到浏览器底端时，设置图片在Y轴方向上向上移动

directionY = 1;

moveY = (height - imgHeight);

}

if (directionX==0){

moveX = moveX + step; //漂浮图片在X轴方向上向右移动

}

else {

moveX = moveX - step; //漂浮图片在X轴方向上向左移动

}

if (moveX < 0) { //如果漂浮图片漂到浏览器左侧时，设置图片在X轴方向上向右移动

directionX = 0;

moveX = 0;

}

if (moveX >= (width - imgWidth)) { //如果漂浮图片漂到浏览器右侧时，设置图片在X轴方向上向左移动

directionX = 1;

moveX = (width - imgWidth);

}

}

setInterval("changePos()",30);