Question

我是一名Javascript初学者，我试图制作我在iPad上写的代码。这个想法是，当用户将鼠标悬停在div上时，它会改变图片。我不能使用画布，因为我使用GIF动画，但他们不能工作。如何监控屏幕上的用户手指位置以使其正常工作？

这是代码：

<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }

div.btn {
width: 20%;
height: 768px;
display: block;
z-index: 99;
float: left;
/* border:solid #444; */
top: 0;
}
</style>

<script type="text/javascript">
function mouseover(x)
{
if (x == 1){
var box = document.getElementById('box'); 
box.style.background='url("spin01.gif")';
}
if (x == 2){
var box = document.getElementById('box'); 
box.style.background='url("spin02.gif")';
}
if (x == 3){
var box = document.getElementById('box'); 
box.style.background='url("spin03.gif")';
}
if (x == 4){
var box = document.getElementById('box'); 
box.style.background='url("spin04.gif")';
}
if (x == 5){
var box = document.getElementById('box'); 
box.style.background='url("spin05.gif")';
}
}
</script>

<body>
<div id="box" style="background: url('spin03.gif'); width:1024px; height:768px; display:block; padding:0;">
<div class="btn" id="btn1" onmouseover="mouseover(1)"></div>
<div class="btn" id="btn2" onmouseover="mouseover(2)"></div>
<div class="btn" id="btn3" onmouseover="mouseover(3)"></div>
<div class="btn" id="btn4" onmouseover="mouseover(4)"></div>
<div class="btn" id="btn5" onmouseover="mouseover(5)"></div>
</div>
</body>

我想，如果我可以跟踪手指的位置，我可以放下5个btn div并根据位置设置if语句。

如何在ipad上进行onmouseover工作？

0 个答案: