使用JS实现图片的飘浮运动

首先贴上准备飘浮的图片镇楼：PUBG

下面准备让这张图片在屏幕里面进行飘浮运动，先贴上HTML和CSS代码和运行图：

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*悬浮框  */
			
			#float {
				position: absolute;
				z-index: 1;
			}
			/*图片大小*/
			
			#floatImg {
				width: 250px;
				height: 150px;
			}
		</style>
	</head>

	<body>
		<div id="float"><img id="floatImg" alt="图片未找到" src="img/pubg.jpg"></div>
	</body>
</html>

介绍一下我的思路，设置6个全局变量，分别记录图片在X轴、Y轴上的移动距离、方向以及速度，接着进行图片的位置改变方法，在方法中，我们首先得到屏幕的大小和照片的大小，设置图片的起始位置，接着进行位置的移动，移动过后再判断图片是否遇到四周墙壁，如果遇到，使其移动方向进行改变，并且移动距离根据其位置的不同设置其为0或者最大移动数(屏幕大小-图片大小)，最后设置一个定时器使其相隔50毫秒进行一次方法执行。这样，飘浮的图片效果就做出来了。

下面附上JS代码进行参考学习：

            //定义全局变量
		var moveX = 0; //X轴方向上移动的距离
		var moveY = 0; //Y轴方向上移动的距离
		var stepX = 5; //图片X轴移动的速度
		var stepY = 6; //图片Y轴移动的速度
		var directionX = 0; //设置图片在X轴方向上的移动方向   0:向右  1:向左
		var directionY = 0; //设置图片在Y轴方向上的移动方向   0:向下  1:向上

		function changePos() {
			var img = document.getElementById("float"); //获得图片所在层的ID
			var height = document.documentElement.clientHeight; //浏览器的高度
			var width = document.documentElement.clientWidth; //浏览器的宽度
			var imgHeight = document.getElementById("floatImg").height; //飘浮图片的高度
			var imgWidth = document.getElementById("floatImg").width; //瓢浮图片的宽度
			//设置飘浮图片距离浏览器左侧位置
			img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px";
			//设置飘浮图片距离浏览器右侧位置
			img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px";

			//设置图片在Y轴上的移动规律
			if(directionY == 0) {
				//飘浮图片在Y轴方向上向下移动
				moveY += stepY;
			} else {
				//飘浮图片在Y轴方向上向上移动
				moveY -= stepY;
			}
			if(moveY < 0) {
				//如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
				directionY = 0;
				moveY = 0;
			}
			if(moveY > (height - imgHeight)) {
				//如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
				directionY = 1;
				moveY = (height - imgHeight);
			}

			//设置图片在X轴上的移动规律
			if(directionX == 0) {
				moveX += stepX;
			} else {
				moveX -= stepX;
			}
			if(moveX < 0) {
				//如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
				directionX = 0;
				moveX = 0;
			}
			if(moveX > (width - imgWidth)) {
				//如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
				directionX = 1;
				moveX = (width - imgWidth);
			}
		}
		setInterval("changePos()", 50);

使用JS实现图片的飘浮运动

猜你喜欢