HTML+CSS3 实现游戏中的小世界地图

最新推荐文章于 2021-06-03 23:42:00 发布

布飞

最新推荐文章于 2021-06-03 23:42:00 发布

阅读量2.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/bbnbf/article/details/50528550

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

做一个地图产品，需要做小地图，效果如下：

代码如下：

<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
		<script src="../js/jquery-1.8.3.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.main {
				position: relative;
				width: 300px;
				height: 300px;
				overflow: hidden;
				margin: 20px auto;
				border: #000 solid 1px;
			}
			
			.out {
				width: 300px;
				height: 300px;
				background: #fff;
				overflow: hidden;
			}
			
			.in {
				border: solid 50px rgba(0, 0, 0, 0.5);
				width: 100px;
				height: 150px;
				border-left-width: 200px;
				border-right-width: 200px;
				border-top-width: 150px;
				border-bottom-width: 150px;
				border-top-width: ;
				position: absolute;
				top: 0;
				left: 0px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="out">
				首先浮在上层 首先母DIV设置固定的位置 width:960px; margin:0 auto; 然后设置要浮动的层的position为absolute，设置padding和margin。这样就固定的浮动了。 如果有多个层浮动，那么设置z-index就可以了。 之后要实现背景半透明 CSS代码如下： background-color:#000000; -moz-opacity:0.7;opacity: 0.7; filter:alpha(opacity=70); 上述都写上，这样可以保证绝大多数的浏览器支持半透明。首先浮在上层
				首先母DIV设置固定的位置 width:960px; margin:0 auto; 然后设置要浮动的层的position为absolute，设置padding和margin。这样就固定的浮动了。 如果有多个层浮动，那么设置z-index就可以了。 之后要实现背景半透明 CSS代码如下： background-color:#000000; -moz-opacity:0.7;opacity: 0.7; filter:alpha(opacity=70); 上述都写上，这样可以保证绝大多数的浏览器支持半透明。
				本文禁止转载!
			</div>
			<div class="in" id="inbox"></div>
		</div>

		<script>
			var inbox = $("#inbox");
			$(document).ready(function() {
				//				tag_num = $(".head >li").length;
				//				nav_widthx = document.body.clientWidth; //获取可视区域宽度
				//				max_width = (tag_num * 60 - nav_widthx + 100) * -1; //获取左滑最大距离
				//				//alert(max_width);
				document.getElementById("inbox").addEventListener('touchstart', touchStart);
				document.getElementById("inbox").addEventListener('touchmove', touchMove);
				document.getElementById("inbox").addEventListener('touchend', function() {
					isMove = false;
					console.log("touch end");
					//					console.log("left:"+inbox.css("left"));
					//					console.log("top:"+inbox.css("top"));
				});
			});
			var lastLeft = 0;
			var lastTop = 0;
			var lastPageX;
			var lastPageY;
			var leftMax = 0; //左边最大值
			var topMax = 0;
			var leftMin = -200;
			var topMin = -150;
			//滑动开始事件
			function touchStart(e) {
				isMove = true;
				e.preventDefault();
				//tx = parseInt($("#head").css('left'));
				lastPageX = e.touches[0].pageX;
				lastPageY = e.touches[0].pageY;
				//				lastLeft=inbox.css("left").replace(/px/, "");
				//				lastTop=inbox.css("top").replace(/px/, "");
				console.log("touch star");
				//				console.log("left:"+inbox.css("left"));
				//				console.log("top:"+inbox.css("top"));
				console.log("lastpos:" + lastPageX + "," + lastPageY);
			}

			function touchMove(e) {
				if (isMove) {
					e.preventDefault();
					var nowPageX = e.touches[0].pageX;
					var nowPageY = e.touches[0].pageY;
					var leftChange = nowPageX - lastPageX;
					var topChange = nowPageY - lastPageY;
					//					console.log("leftChange:"+leftChange);
					//					console.log("topChange:"+topChange);
					nowLeft = parseInt(inbox.css("left").replace(/px/, "")) + leftChange;
					nowTop = parseInt(inbox.css("top").replace(/px/, "")) + topChange;
					console.log("nowPageX:" + nowPageX);
					console.log("nowPageY:" + nowPageY);
					console.log("nowLeft:" + nowLeft);
					console.log("nowTop:" + nowTop);
					if (nowLeft >= leftMin && nowLeft <= leftMax) {
						inbox.css("left", nowLeft + "px");
					}
					if (nowTop >= topMin && nowTop <= topMax) {
						inbox.css("top", nowTop + "px");
					}
					//inbox.css({"left":nowLeft+"px","top":nowTop+"px"});
					//					var n = tx + e.touches[0].pageX - x;
					console.log("e.touches[0].pageY:" + e.touches[0].pageY);
					//					
					//					if (n <= 0 && n > max_width) {
					//						$("#head").css('left', n + 'px');
					//						console.log("N:"+n);
					//					}
					lastPageX = e.touches[0].pageX;
					lastPageY = e.touches[0].pageY;
				}
			}
		</script>
	</body>

</html>

布飞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS3 实现游戏中的小世界地图

做一个地图产品，需要做小地图，效果如下：代码如下： * { margin: 0; padding: 0; } .main { position: relative; width: 300px; height: 300px; overflow: hidden; margi
复制链接

扫一扫