html5图片移动-使用JS实现图片的浮动运动

先贴一张计划漂浮Town House的图片:PUBG

移动图片怎么移动_html5图片移动_移动图片广告

接下来,我们打算让这张图片悬浮在屏幕上,首先粘贴HTML和CSS代码以及运行图:

html5图片移动_移动图片怎么移动_移动图片广告


	
		
		
		
			/*悬浮框  */
			
			#float {
				position: absolute;
				z-index: 1;
			}
			/*图片大小*/
			
			#floatImg {
				width: 250px;
				height: 150px;
			}
		
	
	
		

html5图片移动_移动图片广告_移动图片怎么移动

我介绍一下我的想法html5图片移动,设置6个全局变量,分别记录图像在X轴和Y轴上的距离、方向和速度,然后改变图像的位置。 方法中,我们首先获取屏幕的大小和照片图片的大小,设置图片的初始位置,然后连接位置。 移动后html5图片移动,判断图片是否接触到周围的墙壁。 如果是,请改变图片的方向,并根据其位置设置距离。 0或者最大连接数(屏幕尺寸-图片尺寸),最后设置一个定时器,每50毫秒执行一次。 这样,浮动图片的效果就完成了。

移动图片怎么移动_html5图片移动_移动图片广告

下面附上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  (height - imgHeight)) {
				//如果飘浮图片飘浮到浏览器底端的时候,设置图片在Y轴方向上向上移动
				directionY = 1;
				moveY = (height - imgHeight);
			}
			//设置图片在X轴上的移动规律
			if(directionX == 0) {
				moveX += stepX;
			} else {
				moveX -= stepX;
			}
			if(moveX  (width - imgWidth)) {
				//如果飘浮图片飘浮到浏览器右侧的时候,设置图片在X轴方向上向左移动
				directionX = 1;
				moveX = (width - imgWidth);
			}
		}
		setInterval("changePos()", 50);