利用js中的window对象,实现的一个图片浮动的效果
思路:首先要有一个div来供图片使用,这个div将成为我们控制图片的区域,它在网页中的起始坐标为(0,0);
其次,我们要设定图片在坐标轴上的运行速度,即横向(x)的运行速度和纵向(y)的运行速度;
最后我们着重来控制图片即div的移动:
需要考虑到的是:1)图片是否到达了边界;
2)如果达到了边界,则需要将其速度设置为反方向移动
<html>
<head>
<title>图片浮动</title>
<style>
div{
position:absolute;
}
</style>
</head>
<body>
<div id="img">
<img scr="图片的地址" width=图片的宽 height=图片的高>
</div>
<script -------->
//获取图片的对象
var document.getElementById("img");
//设置图片的起始点坐标
var x=0,y=0;
//设置图片的行进速度
var xSpeed=5; //横坐标的行进速度
var ySpeed=5; //纵坐标的行进速度
//设置图片的最大移动范围
var w=document.body.clientWidth-图片的宽度; //横向移动的最大范围
var h=document.body.clientHeight-图片的高度; //纵向移动的最大范围
function floatimg(){
//判断图片是否达到了边界
//1、如果达到了,那我们就改变图片的方向
if(x>w||x<0) xSpeed=-xSpeed;
if(y>h||y<0) ySpeed=-ySpeed;
//2、如果没有达到,设置坐标值为 起始坐标+速度
x+=xSpeed;
y+=ySpeed;
//使图片按规定坐标移动
img.style.left=x+"px";
img.style.top=y+"px";
//设置图片移动的时间间隔
setTimeout("floatimg()",1000);
}
floatimg();
</script>
</body>
</html>