js实现图片浮动的效果

最新推荐文章于 2022-08-05 14:21:59 发布

mengyun00

最新推荐文章于 2022-08-05 14:21:59 发布

阅读量8.8k

点赞数 3

文章标签： div function

本文链接：https://blog.csdn.net/mengyun00/article/details/7284803

版权

利用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>

mengyun00

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
js实现图片浮动的效果

利用js中的window对象，实现的一个图片浮动的效果思路：首先要有一个div来供图片使用，这个div将成为我们控制图片的区域，它在网页中的起始坐标为（0，0）；其次，我们要设定图片在坐标轴上的运行速度，即横向（x）的运行速度和纵向（y）的运行速度；最后我们着重来控制图片即div的移动：需要考虑到的是：1）图片是否到达了边界；
复制链接

扫一扫