1

好吧，尤其是我对 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>
4

3 回答 3

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

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

于 2013-10-09T21:16:52.203 回答
0

你想做这样的事情吗？

您也可以使用左上随机数。

Jquery 文档中的更多信息

<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>
于 2013-10-09T21:20:52.020 回答
0

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

JSFiddle 的工作示例

于 2013-10-09T21:26:54.993 回答