html内のJavaScriptを外部に出す方法
- html内にあるJavaScriptを外部に出す方法についてご指導いたします。具体的な書き方や手順について解説します。
- JavaScriptを外部ファイルとして分離することで、htmlファイルのサイズを軽くし、メンテナンス性を高めることができます。
- また、外部ファイルとしてJavaScriptを読み込むことで、キャッシュの効果を利用でき、ページの読み込み速度を向上させることができます。
- ベストアンサー
html内にあるJavaScriptを外部に出したいのですが、書き方が
html内にあるJavaScriptを外部に出したいのですが、書き方が分かりません。 ご指導をお願いします。 【現在html】 <script type="text/javascript"> $(function(){ //初期設定 $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px") //戻るボタン $("#carouselPrev").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) //進むボタン $("#carouselNext").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:first").appendTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) // 8秒間隔でスクロール var timerID = setInterval(function(){ $("#carouselNext").click() },8000) // ユーザーが操作すると、タイマーを停止 $("#carouselPrev img,#carouselNext img").click(function(){ clearInterval(timerID); }) }) </script>
- riprice
- お礼率0% (0/6)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
単に<script>と</script>を外した中身をhoge.jsとでもして保存し、 HTMLの</body>の直前にでも <script src="/hoge.js" type="text/javascript"></script> として、入れておけばよいと思うのですが．． これより先にjQuery(おそらく)のライブラリーを積むのもお忘れなく。 <body> -------------- <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script src="/hoge.js" type="text/javascript"></script> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
これだと別に <head> ---------- </head> <body> ----------- の中でも問題ないですね。
関連するQ&A
- どうしてもわかりません カルーセル
$(function(){ $("#s2").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))-300+"px"},"slow","swing", function(){ $("ul.s5:first").appendTo("#s4"); $("#s4").css("marginLeft","0px"); }); }); $("#s6").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", function(){ $("ul.s5:lest").appendTo("#s4"); $("#s4").css("marginLeft","-300px"); }); }); }); 左まわり？はできるんですが、逆方向がどうしてもできません。 animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", のぶぶんが実はよくわかってません。 +200+"px"の部分は回転させる方向なわけですが だとすると、ある特定の位置までいったらappendなりprependがかかって 画像がお尻？につくという事なわけですが 逆方向はそうはならない。なぜなんだろうと納得できないわけです。 すいません。お願いします
- ベストアンサー
- JavaScript
- そろそろカルーセルでアドバイス
お願いします。 $("#s1").click(function(){ $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"slow","swing", function(){ $("ul:first").appendTo("#s2") $("#s2").css("marginLeft","0px") }); }); と例えばこんな感じで時間で画像が動くようにしたいのですが どこで時間的な設定したらいいのかが解りません。 時間で動く関数とか教えてください
- 締切済み
- JavaScript
- jsのスライドショーのボタンの時間制御について
jsのスライドショーについて質問です。 メイン画像とサムネール画像が連動していて、５秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。 これに、切り替わったスライドから５秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の４秒後にボタンをクリックすると、次のスライドが１秒で、また次のスライドに切り替わってしまうのです。 どうか方法を教えてください。 ＜スクリプト＞ //自動再生 var timerID = setInterval(function(){ $('#thumbsNext').click(); },5000); $('#gallery ul').hover(function(){ clearInterval(timerID); }, function(){ timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開 }); function show(){ $('#thumbsInner').animate({ marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px' },'slow','swing', function(){ $('#thumbsInner').css('margin-left','-248px'); $('#thumbsInner ul li:first').appendTo('#thumbsInner ul'); $('#thumbsList .active').next().click(); }); }
- 締切済み
- JavaScript
- ｊQueryでulを動かしたい。
javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){ $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m
- 締切済み
- JavaScript
- JavaScriptのプログラムについて
$(function(){ $("#top a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#question a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q001 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q002 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q003 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q004 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTMLは少し分かりますが JavaScriptがまったく分からない素人です。 ネットで調べて上記のようにプログラムし ページ内リンクを流れるようにスクロールさせることは出来ました。 まずこのプログラムの書き方で合っていますでしょうか？ また、同じ記述が繰り返されているので短くしてやろうと自分なりに $("#q001 a") $("#q002 a") $("#q003 a") $("#q004 a") $("#q005 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) ↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。 省略したり短く出来る余地があればそれも教えていただきたいです。 分かる方がおられましたらお願いします。
- ベストアンサー
- JavaScript
- jquaryについて質問2
<script type="text/javascript"> <!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> うまくいきませんでした。 あといくつか疑問に思う事がありました。 $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ marginLeft:"100px" }, 1500,"swing" ); }); }); 質問1 本ではmarginをつけないで作動するそうです。 しかし自分のはできなったのでmarginをつけました。 つけないタイプは、ｃｓｓでいうところのposition absoluteを事前にしないと この記述になりません。書き方としてはmarginをつけるべきだと思うんですが。。。 質問2 もうひとつopacityのときの数値はコーテーションをいれませんでした。 ですがmarginなどの数値を入れるときにはいれます。 あえてpxという文字が関わっているとしたらparseIntなどの 関数が必要なんではないでしょうか？ 毎度すみませんがお願いします
- ベストアンサー
- JavaScript
- 【jQuery】for文ではイベント登録できない？
複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; for(i=0; i<buttonArray.length; i++){ $(buttonArray[i]).click(function(){ $(divArray[i]).animate({width: "0px"}, "slow", "swing"); }); } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; $(buttonArray[0]).click(function(){ $(divArray[0]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[1]).click(function(){ $(divArray[1]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[2]).click(function(){ $(divArray[2]).animate({width: "0px"}, "slow", "swing"); }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか？ ・今回のようなケースの場合、どのように書くのが適切か？ 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQuery クリックした後の動き
ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>
- ベストアンサー
- JavaScript
- JavaScript インクリメントの書き方
JavaScriptのインクリメントをその都度追加する事がないように for文などで作りたいのですが、上手く動きません。 どの様な書き方をすれば良いかご教授いただきたいです。 よろしくお願いいたします。 =================================== $(document).ready(function(){ $("#navi li#n01 a").click(function () { $("#navi li#n01 ul").slideToggle("slow"); }); }); $(document).ready(function(){ $("#navi li#n02 a").click(function () { $("#navi li#n02 ul").slideToggle("slow"); }); }); $(document).ready(function(){ $("#navi li#n03 a").click(function () { $("#navi li#n03 ul").slideToggle("slow"); }); });
- ベストアンサー
- JavaScript
- javascriptで吹き出し
下記のサイトにある吹き出しをメニューボタンのように複数の画像に反映させたいのですが、どのようにすればよいでしょうか？ http://www.dvq.co.nz/web-design/create-a-jquery-popup-bubble-effect/ javaスクリプトコード $(document).ready(function(){ $(".info-popup a").hover(function(){ $(this).next("em").stop(true, true).animate({opacity: "show", top: "40"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "70"}, "fast"); }); }); cssファイル .info-popup { margin: 0px auto; padding: 0; width: 162px; position: relative; } div.info-popup em { background: url(../image/menu_info_c.gif) no-repeat; width: 162px; height: 42px; position: absolute; top: 0px; left: 0px; text-align: center; text-indent: -9999px; z-index: 2; display: none; } #info-icon { width: 162px; height: 42px; background: url(../image/menu_info.gif) no-repeat 0 0; text-indent: -9999px; margin: 0 auto; display: block; } htmlファイル <div class="info-popup"> <a href="information.html" id="info-icon">information</a> <em>information</em> </div> 詳しい方、是非、アドバイスをお願い致します。
- ベストアンサー
- JavaScript
