Question

每次将鼠标悬停在屏幕上时，我都会尝试制作一个在屏幕上移动的按钮，上下运动有效，但左右不会。当我想让它双向移动时，按钮只是垂直移动。有问题的代码：

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" 
onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'" 
onmouseover="style.left= Math.floor((Math.random()*500+1) + 'px'">

Answer 1

将两者合并为一个鼠标悬停。此外，您在第二次鼠标悬停时错过了结束时间：

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" 
onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'; style.left= Math.floor((Math.random()*500)+1) + 'px'">

Here's a jsFiddle.

Answer 2

您不能拥有两次相同的属性，只能在一个“onmouseover”属性中设置all。

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;"  onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'; style.left= Math.floor((Math.random()*500)+1) + 'px'">

你用“;”分隔多个javascript行在同一财产

Answer 3

不要使用2个鼠标悬停处理程序 - 将它们组合成一个：

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top: 100px; left: 10px;" onmouseover="this.style.top= Math.floor((Math.random()*500)+1) + 'px'; this.style.left= Math.floor((Math.random()*500)+1) + 'px'">

演示：http://jsfiddle.net/msGnh/

Answer 4

试试这个

<script type="text/javascript">
    function move( element ) {
       element.style.top = Math.floor((Math.random()*500)+1) + 'px';
       element.style.left = Math.floor((Math.random()*500)+1) + 'px';
    }
</script>

OR

 <input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" onmouseover="this.style.top= Math.floor((Math.random()*500)+1) + 'px';this.style.left= Math.floor((Math.random()*500)+1) + 'px'" >

内联css没有设置在按钮上

4 个答案: