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

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

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

介绍一下我的思路，设置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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！