javascript实现html页面图片的飘浮运动

最新推荐文章于 2024-05-03 11:47:20 发布

Smallmouse96

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量3k

点赞数 2

文章标签： javascript

原文链接：https://blog.csdn.net/qq_41204714/article/details/82353740

版权

javascript实现html页面飘窗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*悬浮框  */
			
			#float {
				position: absolute;
				z-index: 1;
			}
			/*图片大小*/
			
			#floatImg {
				width: 600px;
				height: 160px;
			}
		</style>
	</head>
	<body>
		<div id="float" onmouseover="clearPos1()" onmouseout="changePos()">
			<a href="javascript:;" target="_blank">
				<img id="floatImg" alt="图片无法加载" src="icon.jpg">
			</a>
		</div>
		<script>
			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() {
				timer = setInterval(function() {
					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);
					}
				}, 30)
				
			}
			changePos();
			
			function clearPos1() {
				clearInterval(timer);
			}
		</script>
	</body>
</html>

扫码关注微信公众号，持续更新干货

Smallmouse96

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
javascript实现html页面图片的飘浮运动

javascript实现html页面飘窗<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*悬浮框 */ #float { position: absolute; z-index: 1; } /*图片大小*/
复制链接

扫一扫