1

JavaScriptで実行しようとしている非常に具体的なトリックがあり、これを実行できるライブラリがそこにあると確信していますが、正確な解決策の検索はこれまで失敗しました。

画面の右上隅に「ログイン」ボタンがあるWebページがあります。ユーザーがボタンをクリックすると、画面の中央にCSSモーダルダイアログボックスが表示され、ユーザーは認証情報を入力できます。CSSダイアログボックスがすべて設定されました。不足している部分が1つだけあります。

ユーザーがログインボタンをクリックしたときに、ログインボタンから画面の中央にモーダルボックスが「開いている」ことを示すアニメーションを追加して、次に進むべき場所にユーザーの目を引き付けたいと思います。アニメーションは、ウィンドウがWindowsタスクバーに最小化/最小化されていない場合と同じように感じるはずです。

この機能を備えたJavaScriptライブラリを誰かに教えてもらえますか？本当にありがとう！

4

4 に答える 4

2

jQueryUIで探していたものが見つかったと思います。

ある要素から別の要素にボックスの輪郭をアニメーション化する「転送」効果があります。これでは、モーダルダイアログ自体がボタンから拡大することはありませんが、ポイントAからポイントBにユーザーの目を引くという目的を達成する必要があります。他の解決策についても聞いてみたいです。

jQueryUI Transferデモ： http ：//jqueryui.com/demos/effect/default.html （選択ボックスを「Blind」から「Transfer」に変更し、「Runeffect」をクリックします。）

jQueryUI Transferの説明： http ：//docs.jquery.com/UI/Effects/Transfer

于 2012-07-21T05:11:11.183 に答える
1

これが私の試みです:-phttp : //jsfiddle.net/zAzqB/

jQueryとjQueryEasingライブラリを利用します（効果をスムーズにするために…イージングライブラリを省略しても問題なく動作します）。アニメーション化する必要のある要素は、アニメーションの実行中に複製され、元の要素は、最終的な位置にアニメーション化するクリッピング要素に移動されます。

于 2012-07-21T16:33:25.863 に答える
0

最近、JQuery Mobile SimpleDialog2を使用しましたが、非常に満足しています。アニメーションはクロムでは機能しますが、FFでは機能しないことに気づきました。

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

于 2012-07-21T05:14:46.383 に答える
0 
<!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>
于 2012-07-21T05:40:05.793 に答える