- ベストアンサー
Ajaxのアニメーション的な動きをするFormを探しています
- Ajaxのアニメーション的な動きをするFormを探しています。
- http://www.synthview.com/en/のCONTACTをクリックするとフォームが上から出現します。HTMLを参考に制作しましたけど、うまく行きませんでした。
- http://www.designshack.co.uk/tutorialexamples/jquerycontactform/こんなのが見つかりましたけど、残念ながらExplorerではうまく動作できませんでした。他に似たようなAjaxのFormを探しています。ありましたら教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どちらもjquery（javascript）を利用しているみたいですね。 どのようにしたいのか不明ですが、例えば最初のほうならformを画面上部に配置しておいて、全体をスクロールダウンしてくればよいのでは？ 後者の例ではform部分だけをスクロールダウンすればOK。 Ajaxは表示内容を外部から取得したり、ユーザの入力値をサーバに送信したりする際に利用するものなので、直接は関係ないかも。 ごく簡易な似たものの例（jqueryは使用していません） CONTACTをクリックで表示/非表示がスクロールでトグルします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body { position:relative; top:0px; } #navi { height:30px; } #navi ul { list-style:none; padding:0; margin:0; } #navi li { display:block; width:9em; padding:10px; float:left; border:1px solid #ddd; text-align:center; cursor:pointer; } #form form { height:100px; padding:10px; line-height:1.8em; position:absolute; top:-200px; } #form ul { list-style:none; } #form li span { display:inline-block; width:9em; } #form li input { width:10em; } </style> <script type="text/javascript"> <!-- var sample = function() { var bdy = document.getElementsByTagName("body")[0]; if (!this.dir) this.dir = -4; if (this.id) clearTimeout(this.id); this.dir = -this.dir; sample.scroll(bdy, this.dir, 200); } sample.scroll = function(e, d, m) { var t = (e.currentStyle)? e.currentStyle["top"]: getComputedStyle?document.defaultView.getComputedStyle(e, '').getPropertyValue("top"): null; t = parseInt(t); (function() { t += d; t = t>m?m:t<0?0:t; e.style.top = t + "px"; if (t>0 && t<m) this.id = setTimeout(arguments.callee, 20); })(); } //--> </script> </head> <body> <div> <ul id="navi"> <li>A</li> <li>B</li> <li>C</li> <li onclick="sample()">CONTACT</li> </ul> </div> <div id="form"> <form> <ul> <li style="font-weight:bold;">title of form</li> <li><span>title for box 1</span> <input type="text" name="i1"></li> <li><span>title for box 2</span> <input type="text" name="i1"></li> <li><span>title for box 3</span> <input type="text" name="i1"></li> </ul> </form> </div> </body> </html>
お礼
Ajaxを使わなくても出来るんですね。 すごく助かりました。ありがとうございました。