先贴一张计划漂浮Town House的图片:PUBG
接下来,我们打算让这张图片悬浮在屏幕上,首先粘贴HTML和CSS代码以及运行图:
/*悬浮框 */
#float {
position: absolute;
z-index: 1;
}
/*图片大小*/
#floatImg {
width: 250px;
height: 150px;
}
我介绍一下我的想法html5图片移动,设置6个全局变量,分别记录图像在X轴和Y轴上的距离、方向和速度,然后改变图像的位置。 方法中,我们首先获取屏幕的大小和照片图片的大小,设置图片的初始位置,然后连接位置。 移动后html5图片移动,判断图片是否接触到周围的墙壁。 如果是,请改变图片的方向,并根据其位置设置距离。 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 (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);
发表评论