<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>
JS做的网页图片浮动效果
最新推荐文章于 2020-12-19 22:53:02 发布