如何制作 Jquery 或 CSS3 动画“如果可以，请抓住我”按钮？
Posted
技术标签:
【中文标题】如何制作 Jquery 或 CSS3 动画“如果可以，请抓住我”按钮？【英文标题】：How to make Jquery or CSS3 Animated "Catch me if you can" button? 【发布时间】：2013-03-20 03:42:58 【问题描述】：我想使用纯 CSS 或 Jquery 创建一个动画按钮，以便在 4 月 1 日为我的访问者开个玩笑。基本上，这将是常规按钮，但是当用户将鼠标悬停在鼠标上时，它会快速移动到鼠标的另一侧。这是一个简单的游戏。但它不应该那么难捕捉。如果他/她努力，用户可以点击它:)
谁能帮我做这个？
谢谢！
【问题讨论】：
您是否尝试过搜索？ ***.com/questions/10058308/… @BillyMoat c'mooon 3000 行代码干什么用的？ @roXon - 我并不是说一个是完美的解决方案。我只是想鼓励 OP 先搜索一下，因为他们甚至没有为他们最初尝试过的内容发布任何代码。 【参考方案1】：类似这样的：
$("button").mouseover(function()
$(this).css(
left:(Math.random()*300)+"px",
top:(Math.random()*300)+"px",
);
);
演示：http://jsfiddle.net/ZQamp/
感谢@roXon 提供更好动画的建议：http://jsfiddle.net/ZQamp/3
【讨论】：
我认为这没有任何问题。如果一款我看不到任何获胜方式的游戏，我可能永远不会再玩第二次了But it should not be so difficult to catch. User may click on it if he/she try hard :)
+1 哦，对不起，我需要仔细阅读 Q. :) 以免激怒用户：jsfiddle.net/ZQamp/3 任何方式你都不需要“PX”
它可以像我需要的那样工作，但按钮不应向上或向下。只是快速地向左和向右。我想我们需要获得鼠标坐标才能做到这一点。对吗？
不，我只是想表达我的意见。也感谢您的建议:)【参考方案2】：
这里是完整的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block
position: absolute;
left: 50px;
width: 130px;
height: 30px;
margin: 5px;
</style>
<script src="ReferencetoYourJqueryFile" type="text/javascript"></script>
</head>
<body>
<div class="block">
<input type="button" name="btnClick" value="Catch me if you can" style="width: 130px;
height: 30px; border: 1px sold silver; background-color: #f7dfb5" />
</div>
<script type="text/javascript">
$(".block").mouseover(function ()
$(".block").animate(
left:(Math.random()*500),
top:(Math.random()*500),
, "fast");
);
</script>
</body>
</html>【讨论】：
以上是关于如何制作 Jquery 或 CSS3 动画“如果可以，请抓住我”按钮？的主要内容，如果未能解决你的问题，请参考以下文章