使用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>