【javascript】学习总结——漂浮广告特效

漂浮广告特效代码：

Code:

<script type="text/javascript" language="javascript">

//定义全局变量

var xPos=0;//x轴坐标

var yPos=0;//Y轴坐标

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

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

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





function changePos(){

var img=document.getElementById("float");

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

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

var Hoffset=img.offsetHeight;//漂浮图片高度

var Woffset=img.offsetWidth;//漂浮图片宽度

img.style.left=xPos+document.body.scrollLeft;//漂浮广告距浏览器左侧的位置

img.style.top=yPos+document.body.scrollTop;//漂浮广告距浏览器顶端的位置

if(yon==0){

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

}else{

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

}

//如果漂浮图片飘到浏览器顶端时，设置图片在y轴方向上向下移动

if(yPos<0){

yon=0;

yPos=0;

}

//如果漂浮图片飘到浏览器低端时，设置图片在y轴方向上向上移动

if(yPos>=height-Hoffset){

yon=1;

yPos=(height-Hoffset);

}

if(xon==0){

xPos=xPos+step;//漂浮图片在x轴方向向右移动

}else{

xPos=xPos-step;//漂浮图片在x轴方向向左移动

}

//如果漂浮图片飘到浏览器左侧时，设置图片在x轴方向上向右移动

if(xPos>=(width-Woffset)){

xon=1;

xPos=(width-Woffset);

}

setTimeout("changePos()",30);

}

window.onload=changePos();

</script>