我想使用纯 CSS 或 Jquery 创建一个动画按钮,以便在 4 月 1 日为我的访问者开个玩笑。基本上,这将是常规按钮,但是当用户将鼠标悬停在鼠标上时,它会快速移动到鼠标的另一侧。这是一个简单的游戏。但它不应该那么难捕捉。如果他/她努力,用户可以点击它:)
谁能帮我创建这个?
谢谢!
我想使用纯 CSS 或 Jquery 创建一个动画按钮,以便在 4 月 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
这是完整的代码:
<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>