Question

我的页面上有一个图像，希望它在鼠标悬停或点击时改变位置，所以我尝试了几件事，但我找不到正确的开始。

所以我开始改变顶部位置，但这不起作用，我希望鼠标悬停在图像上它会跳转到x / y位置（可能是随机x / y）如果我再次鼠标悬停它会跳到另一个位置

  $('#image').one('click', function () {
     $(this).css( 'top' : '+=200' );
  });

但那不行，所以请有人给我一些意见，我可以弄明白该怎么办？

Answer 1

请注意，在为top设置值时，jQuery不会自动获取先前设置的值并向其添加200（就像普通的编程语言一样）。如果您尝试在控制台中查看，您可能已将此视为执行错误。您可以先获得top的值，然后再添加200px，然后再次设置它。

这应该有效：

$('#image').one('click', function () {
  var top = parseInt($(this).css("top"));
  $(this).css( 'top' , top+ 200);
});

我必须将字符串解析为css返回的整数，你也可以用一些只返回值的方法替换那个额外的操作，而不是添加“px”的值，dunno已经是一个。

Answer 2

尝试这样的事情：

<html>
    <head>
        <script type="text/javascript">
            function switchPos(obj) 
            {
                var divobj = document.getElementById('div1')
                var x = divobj.offsetHeight - obj.height - 5;
                var y = divobj.offsetWidth - obj.width - 5;

                var randomx = Math.floor(Math.random()*x+1);
                var randomy = Math.floor(Math.random()*y+1);

                obj.style.top = randomx + 'px';
                obj.style.left = randomy + 'px';
            }
        </script>
    </head>
    <body>
        <div id="div1" style="width: 800px; background: red;">
            <img src="image.jpg" style="position:relative;" onmouseover="switchPos(this);" onmouseout="switchPos(this);"/>
        </div>
    </body>
</html>

MouseOver或hover（）或css（）用于更改位置

2 个答案: