用JavaScript制作一个按钮的动画，从按钮到屏幕中心弹出一个模式对话框

Animate a button in JavaScript to bring up a modal dialog box from the button to the center of the screen?

本文关键字：一个 按钮 屏幕 对话框 模式 JavaScript 动画      更新时间：2023-12-28

我尝试在JavaScript中执行一个非常具体的技巧，我相信有一些库可以让我做到这一点，但到目前为止，我对精确解决方案的搜索失败了。

我有一个网页，在屏幕的右上角有一个"登录"按钮。当用户点击按钮时，我会在屏幕中央显示一个CSS模式对话框，允许用户输入他们的身份验证信息。CSS对话框已经设置好了，只缺少一块：

当用户点击登录按钮时，我想添加一个动画，显示从登录按钮到屏幕中心的模式框"打开"，以帮助用户将目光吸引到下一个应该去的地方。动画的感觉应该类似于窗口最小化到Windows任务栏/从Windows任务栏取消最小化时的感觉。

有人能给我指一个具有此功能的JavaScript库吗？非常感谢！

我想我刚刚在jQueryUI:中找到了我想要的东西

有一种"传递"效果，可以将长方体轮廓从一个元素动画化到另一个元素。虽然这不会显示模式对话框本身从按钮展开，但它应该可以实现将用户的眼睛从A点吸引到B点的目的。不过，我很想听听其他解决方案！

jQueryUI传输演示：http://jqueryui.com/demos/effect/default.html（将选择框从"盲"更改为"转移"，然后单击"运行效果"。）

jQueryUI传输描述：http://docs.jquery.com/UI/Effects/Transfer

下面是我的尝试：-phttp://jsfiddle.net/zAzqB/

使用jQuery和jQuery Easing库（只是为了使效果更平滑……可以忽略Easing图书馆，它仍然可以正常工作）。应设置动画的元素在动画发生时被克隆，原始元素被移动到设置动画到最终位置的剪裁元素中。

我最近使用了JQuery Mobile SimpleDialog2，对此非常满意。我确实注意到这部动画适用于chrome，但不适用于FF。

http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.clickBrn { height:50px; width:100%; text-align:right;}
.popUp {height:100px; width:500px; margin:auto; background:#333; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; line-height:100px; margin-top:100px;}
</style>
<script type="text/javascript" src="javascript/jquery-1.6.2.js"></script>
<script type="text/javascript" src="javascript/jquery.min.js"></script>
</head>
<body>
<div class="clickBrn">
<input type="button" name="btn" id="btn" value="Click" />
</div>
<div id="iAM" class="popUp"> </div>
<script>
$("#iAM").hide();
$("#btn").click(function()
{
//document.getElementById('iAM').style.marginLeft="400px";
$("#iAM").css( { marginLeft : "400px" } );
$("#iAM").show(1000);
});
</script>
</body>
</html>
相关文章：