虚拟摇杆nipplejs dynamic模式下不显示记录

晴天、style

于 2021-11-25 13:42:30 发布

阅读量719

点赞数

文章标签： js 前端游戏开发

本文链接：https://blog.csdn.net/qq_40853517/article/details/121535722

版权

使用nipplejs的dynamic模式下，虚拟遥感怎么点都不显示

var dynamic = nipplejs.create({
	                    zone: document.getElementById('joystick'),
						mode: 'dynamic',
	                    color: 'grey',
						size: '250',
	                    multitouch: true
	                });

原来是css上要对相应的div标签添加4个属性

#joystick {
		/* 前四个是必传值！ */
	    display: block;
	    position: absolute;
	    width: 70%;
	    height: 70%;
		
		border:1px solid;
	    /* left: 0; */
	}

摇杆就出现了

完整代码如下：

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>方向键</title>
		<style>
		#joystick {
			/* 前四个是必传值！ */
			display: block;
			position: absolute;
			width: 70%;
			height: 70%;
			
			border:1px solid;
			/* left: 0; */
		}
		</style>
		<script src="./js/nipplejs.js"></script>
	</head>
	<body>
		<div id="joystick"></div>
	</body>
	<script>
		var dynamic = nipplejs.create({
	                    zone: document.getElementById('joystick'),
						mode: 'dynamic',
	                    color: 'grey',
						size: '250',
	                    multitouch: true
	                });
	</script>
</html>