JS做的网页图片浮动效果

来源:互联网 发布:手机上编程小游戏 编辑:程序博客网 时间:2024/05/11 22:08
<html><head><title>浮动图片</title><!--这个地方一定要注意,要把DIV设置成绝对定位才可以--><style>div{position:absolute;}</style></head><body><div id="divimg"><img src="3D.jpg" id="image1" width="140" height="112"/></div></body></html><script language="javascript" type="text/javascript">var divimg = document.getElementById("divimg");//定义图片的初始位置var x=0,y=0;//divimg.style.left="500px";//定义图片的行进速度var xspeed=6,yspeed=7;//计算图片的行进区域var w=document.documentElement.clientWidth-145;var h=document.documentElement.clientHeight-120;//当图片撞到边框时,执行的动作function floatimg(){if(x>w||x<0){xspeed = -xspeed;}if(y>h||y<0){yspeed = -yspeed;}x=x+xspeed;y=y+yspeed;divimg.style.left=x+"px";divimg.style.top=y+"px";setTimeout("floatimg();",40);}floatimg();</script>

原创粉丝点击