javascript随机图片效果

最新推荐文章于 2021-10-08 14:45:51 发布

Sword_A

最新推荐文章于 2021-10-08 14:45:51 发布

阅读量796

点赞数

文章标签： javascript function div

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7299612

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片随机浮现</title>
<style type="text/css">
div {
	position:absolute;
}
</style>

</head>

<body>
<div id="pic"><img src="11.BMP" width="150" height="100"/></div>


</body>
</html>

<script type="text/javascript" language="javascript">
	
	//获取图片所在的div对象
	var pic = document.getElementById('pic');
				
	var w=document.body.clientWidth-150,h=document.body.clientHeight-100; //窗口的大小
	
	 
	
	function floatimg(){
		
		//产生随机坐标
	var x = Math.random()*w;
	
	var y = Math.random()*h;
	
	//图片的定位
	pic.style.left=x+"px";
	
	pic.style.top=y+"px";
		
		setTimeout("floatimg()",1000);
		
	}
	
	floatimg();

</script>

原理：通过Math.random()产生不同的随机数为图片的坐标，然后定位图片，接着利用setTimeout产生一个一直循环不同变换坐标的效果