本文主要是介绍使用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"); //获得图片所在层的IDvar 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实现图片的飘浮运动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
