JS实现图片随机浮动效果

来源:互联网 发布:阿里云ssl证书申请 编辑:程序博客网 时间:2024/04/28 19:33
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片随机浮动游戏</title>
<style type="text/css">

//对DIV进行绝对定位
div{
     position:absolute;
 
  }
</style>
</head>
<body>
<div id="floatimg"><img src="../1.jpg" height="150" width="100"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
  var floatimg=document.getElementById("floatimg");

//定义初识坐标
  var x=0,y=0;

//获取图片随机浮动的可见范围
  var w=document.body.clientWidth-100,h=document.body.clientHeight-150;

  function picfloat(){

//定义图片随机出现的坐标

     x=Math.round(Math.random()*w);
     y=Math.round(Math.random()*h);
   
       floatimg.style.left=x+"px";
       floatimg.style.top=y+"px";

//设置间隔时间
       setTimeout("picfloat()",500);
      
}
   picfloat();
</script>

原创粉丝点击