MouseOver、hover() 或 css() 用于更改位置

发布于 2024-12-10 06:23:53 字数 298 浏览 2 评论 0原文

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

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

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

但这不起作用，所以请有人能给我一些意见，我可以弄清楚该怎么做？

原文

I have an image on my page and want that it change the position on mouseover or on click, so I tried several things but I cant find the right start.

So I started to change the top-position but that's not working, I would like that on mouseover the image it jumps to position x/y (maybe random x/y) if I mouseover it again it will jump to another position.

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

But that's not working so please someone could give me some input that I can figure out what to do?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〗斷ホ乔殘χμё〖 2024-12-17 06:23:53

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

这应该可行：

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

我必须将字符串解析为 css 返回的整数，您也可以通过某种仅返回值而不返回添加了“px”的值的方法来替换该额外操作，不知道有没有。

Note that while setting values for top, jQuery will not automatically get the value of top set previously and add 200 to it(like a normal programming language). You could have seen this as an error in executing if you try to see in a console. You can get the value of top first and then add 200px to it and then set it again.

This should work:

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

I had to parse the string to an integer returned by css, you could also substitute that extra operation by some method that returns only the value and not the value with "px" added to it, dunno if there is one already.

回复收藏 0 原文

给不了的爱 2024-12-17 06:23:53

尝试这样的事情：

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

Try something like this:

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

回复收藏 0 原文

~没有更多了~