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

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

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);