Question

好吧，所以我对JavaScript编码特别陌生，并且只使用HTML和CSS几个月，所以我很抱歉，如果这简直太荒谬了。

我正在尝试使用基本的嵌入式JavaScript（jquery）来获取每次鼠标悬停时移动到新位置的超链接，有点像跟随激光指针点的猫。

当我运行此代码时，“moveAway”方法似乎在悬停时完全不移动链接。只是想知道是否有人可以帮助确定问题：

<html>
<head>

<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

</head>
<body>

<div id="link">
<a href="http://www.google.com">Click!</a>
</div>

<script>
function moveAway()
{
$('#link').moveTo(0,100);
}
$('#link').hover(moveAway);
</script>

</body>
</html>

Answer 1

$('#link').hover(function(e) {
    $(this).css('top', '0px');
    $(this).css('left', '100px');
    $(this).css('position', 'absolute');
});

我不确定这是不是你想要的。请参阅：http://jsfiddle.net/MHzYF/

Answer 2

你想做这样的事吗？

您也可以使用left和top random。

Jquery documentation

中的更多信息

<html>
<head>

<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

</head>
<body>
<style>
    #link
    {
        position:absolute;
    }
</style>
<div id="link">
<a href="http://www.google.com">Click!</a>
</div>

<script>
function moveAway()
{
$('#link').animate({
    left: "+=50",
    top: "+=50"
  });
}
$('#link').hover(moveAway);
</script>

</body>
</html>

Answer 3

您可以通过介绍Math.random()来生成x和y坐标，并使用jQuery的animate方法，让它变得有趣。您可以用您喜欢的偏移量替换100。

<强>的jQuery

$('#link').on('mouseover', function(){
    x = Math.floor((Math.random()*100)+1);
    y = Math.floor((Math.random()*100)+1);

    $(this).animate({
        top: x,
        left: y
    });
});

<强> HTML

<a href="http://www.google.com" id="link">Click!</a>

<强> CSS

#link { position: absolute; }

Working Example at JSFiddle

JavaScript＆amp; jquery - moveTo和hover

3 个答案: