![]()
- javascript new演算子について質問があります。
javascript new演算子について質問があります。 只今javascript勉強中なのですが、どこかのサイトでnew演算子は悪いパーツとの 記事を読みました。 そこでnew演算子を使用せずにオブジェクト生成の方法を試行錯誤考えてみたのですが (IE用に__proto__もなしで)例えば以下コードはアリなコードでしょうか？？ あるいはありえない感じでしょうか？？ またnewが悪なのはインスタンスを作る時にnewを付け忘れると、 グローバルな汚染をしてしまうということだけなのでしょうか？？ オブジェクトとプロトタイプの理解に苦しんでいるところなので 色々と曖昧なのですが、どなたかどうぞご教授お願い致します。 var obj = {}; obj.method = function(){ this.prop1 = "hoge" return this; }; obj.method.prototype = obj.method(); obj.method.prototype.prop2 = "fuga"; var obj2 = obj.method(); console.log(obj2)
- ベストアンサー
- poyon8989
- JavaScript
- 回答数2
- javascriptを只今勉強中なのですが、オブジェクトについてこんが
javascriptを只今勉強中なのですが、オブジェクトについてこんがらがってしまいました。 var obj = new Object(); var obj2 = {}; Object.prototype.prop1 = "hoge"; obj,obj2共にprop1にhogeがセットされるのですが、オブジェクトリテラルのobj2は Objectコンストラクタのインスタンスと解釈できるのでしょうか？？ new演算子について色々とfirebugで調べていたところこの疑問が出てきました。 newなしでもインスタンスができるのでしょうか？ オブジェクトを理解していないので意味不明な質問かもしれませんが どなたかアドバイスいただけると嬉しいです。
- ベストアンサー
- poyon8989
- JavaScript
- 回答数2
- onclickを利用した伸縮メニューの作成方法を教えてください。
onclickを利用した伸縮メニューの作成方法を教えてください。 http://javascript123.seesaa.net/article/107467993.htmlさんののサンプルソースを基に自分なりのメニューができて非常に感謝しているのですが、もう2点改良したいのでどなたか教えてください。 (1)：一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。 (2)：一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか？ 改良すべきソース箇所とソースを詳細に教えてください。 よろしくお願いします。
- ベストアンサー
- jeday8118
- JavaScript
- 回答数3
- onclickを利用した伸縮メニューの作成方法を教えてください。
onclickを利用した伸縮メニューの作成方法を教えてください。 http://javascript123.seesaa.net/article/107467993.htmlさんののサンプルソースを基に自分なりのメニューができて非常に感謝しているのですが、もう2点改良したいのでどなたか教えてください。 (1)：一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。 (2)：一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか？ 改良すべきソース箇所とソースを詳細に教えてください。 よろしくお願いします。
- ベストアンサー
- jeday8118
- JavaScript
- 回答数3
- リンク先でツリーを展開したままに
リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか？ たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。
- ベストアンサー
- sumomo_yk
- JavaScript
- 回答数3
- jquery にて、アラートダイアログ表示
jquery を用いて、 下記のようなアラートアクションをしたいと思っています。 ○HTML /* ----------------------------------- */ <table id="stockWrap"> <tr><td class="stock">即納</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】6ヶ月</td></tr> </table> /* ----------------------------------- */ ○条件 #stockWrap の中に、 「【予約注文】○ヶ月」と「即納」が混在している場合。 または、 「【予約注文】○ヶ月」と「【予約注文】○ヶ月」が混在ある場合。 ただしその他の条件として、 ※<tr>～</tr> の数は状況によって変わり、中身も「【予約注文】○ヶ月」か「即納」も状況により変化します。 ※「【予約注文】○ヶ月」１つのみの場合、「即納」１つのみの場合、「即納」が複数ある場合は、除外します。（アクション開始しません） ※上記には 3ヶ月や 6ヶ月 とありますが、【予約注文】○ヶ月 は変わる場合があるので、前方一致で【予約注文】と指定したいと思っています。 ○アクション （１） アラートダイアログが表示。 可能でしたら、「jQuery Alert Dialogs」を用いてダイアログを表示させたい。 テキストは、 「 納期が違う商品は、同時に決済ができません。<br>別々に注文ください。 」 と表示さたいと思っています。 「jQuery Alert Dialogs」 http://abeautifulsite.net/2008/12/jquery-alert-dialogs/ （２） 上記アラートで OK を押したら、 .stock の backgroung-color を #FF0000; にして目立たせる。 以上です。 つたない説明で申し訳ないですが、 何卒よろしくお願い致します。 不明な点があったら、補足します。
- ベストアンサー
- kazuya88
- JavaScript
- 回答数2
- 戻り値のリテラル関数の引数の出所はどこなの？
お世話になっております。現在JavaScriptの勉強をしております。 その一環としてPrototype.js ver 1.6.1 を解読しているのですが Enumerable 等のメソッドで出てくる return でリテラル関数を指定するような部分が多々見受けられるのですが…この意味がイマイチ感覚がつかめず困っています。 例：Prototype.js 702行目付近 Enumerable = (function(){... の collectメソッド（743行目付近） function collect(iterator, context) { iterator = iterator || Prototype.K; var results = []; this.each(function(value, index) { results.push(iterator.call(context, value, index)); }); return results; } などの this.each(function(value, index) { results.push(iterator.call(context, value, index)); } 部分で function(value, index)... とあるvalue, index はどこでどれから指定されるのかがよくわかりません。 [1,2,3,4].collect(a,b); と呼び出した場合、collect(a,b){... と呼ばれますが value と indexには何がどうやって指定されるのでしょうか？ このような記法が把握できず、混乱を極めている状態です。 どなたかお手数ですがお教え願えないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- wwsm
- JavaScript
- 回答数5
- ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- km340
- JavaScript
- 回答数3
- html ファイルを読み込んで表示させる方法
javascript の初心者です。 HP上のfaqページで，質問事項が箇条書きされていて，どれかひとつをクリックすると，その下に回答が表示されるようにしたいと考えています。 ここまではどうにかできたのですが，ファイルの大きさや後の管理のことを考えて，回答はそれぞれ別のhtmlファイルにして，質問をクリックするとそのhtmlファイルを読み込んで表示したいのですがどのようにすればいいのでしょうか？ prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。
- ベストアンサー
- km340
- JavaScript
- 回答数6
- html ファイルを読み込んで表示させる方法
javascript の初心者です。 HP上のfaqページで，質問事項が箇条書きされていて，どれかひとつをクリックすると，その下に回答が表示されるようにしたいと考えています。 ここまではどうにかできたのですが，ファイルの大きさや後の管理のことを考えて，回答はそれぞれ別のhtmlファイルにして，質問をクリックするとそのhtmlファイルを読み込んで表示したいのですがどのようにすればいいのでしょうか？ prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。
- ベストアンサー
- km340
- JavaScript
- 回答数6
- javascriptのforループ中の変数について質問です。
javascriptのforループ中の変数について質問です。 下記のようなコードを書きました。 function test(){ for (i = 0;i < 3;i++){ var msg = "msg"+i; setTimeout(function(){ alert(msg); },1000 * i); } } これを実行すると、１秒間隔で順番に"msg2"→"msg2"→"msg2"と表示されます。 しかし、期待する動作は１秒間隔で順番に"msg0"→"msg1"→"msg2"なのです。 この動作を実現するために、どのようにスクリプトを修正すればよいか、ご教授いただければ幸いです。
- ベストアンサー
- misshiki
- JavaScript
- 回答数5
- jQueryのdialogの件で教えてください。
jQueryのdialogの件で教えてください。 いつもお世話になりますm(__)m データ入力フォームで、jQueryのdialogを使おうと思います。 jQueryのページからダウンロードして、デモページのようなデータ入力用のフォームを設置したところ問題なく動きました。 ※デモページ(jQueryのサイトです) http://jqueryui.com/demos/dialog/modal-form.html このフォームで、右上の閉じる(×)を使えなくしたいと思っています。。 フォームを閉じるのにボタンを使おうと思いますので、×を非表示又は反応しないようにしたいのですが、方法がわかりません(>_<) (×が不要です) どなたかご存じの方がおられましたら、是非ともご教授お願いいたしますm(__)m
- ベストアンサー
- osaka-aq
- JavaScript
- 回答数1
- ドラッグによるスライド移動をさせない方法(safari/chrome)
お世話になります。 早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、 このテキストボックスでドラッグしてスライドの領域外へ移動させると 次のスライドへ移動してしまいます。 （safari と google chrome のみ） これを移動させないよう固定する方法はありませんでしょうか？ 以下にソースコードを載せておきます。 ------------------------------------------------------- <html> <head> <title>Easy Slider TEST</title> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> <style type="text/css"> #slider{} #slider ul{ list-style-type:none; margin:0px; padding:0px; } #slider ul li{ height:100px; width:300px; } </style> </head> <body> <div id="slider"> <ul> <li><div style="height:100%; background-color:#aaa;"> <input type="text" name="text" value="slide-1" /> </div></li> <li><div style="height:100%; background-color:#bbb;">slide-2</div></li> <li><div style="height:100%; background-color:#ccc;">slide-3</div></li> </ul> </div> </body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。
- ベストアンサー
- mg21
- JavaScript
- 回答数2
- ドラッグによるスライド移動をさせない方法(safari/chrome)
お世話になります。 早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、 このテキストボックスでドラッグしてスライドの領域外へ移動させると 次のスライドへ移動してしまいます。 （safari と google chrome のみ） これを移動させないよう固定する方法はありませんでしょうか？ 以下にソースコードを載せておきます。 ------------------------------------------------------- <html> <head> <title>Easy Slider TEST</title> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> <style type="text/css"> #slider{} #slider ul{ list-style-type:none; margin:0px; padding:0px; } #slider ul li{ height:100px; width:300px; } </style> </head> <body> <div id="slider"> <ul> <li><div style="height:100%; background-color:#aaa;"> <input type="text" name="text" value="slide-1" /> </div></li> <li><div style="height:100%; background-color:#bbb;">slide-2</div></li> <li><div style="height:100%; background-color:#ccc;">slide-3</div></li> </ul> </div> </body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。
- ベストアンサー
- mg21
- JavaScript
- 回答数2
- ブラウザの頁内移動についての質問です。
ブラウザの頁内移動についての質問です。 私は現在、Javascript+PHPでSNSアプリを作成しています。 SNSアプリはプラットフォーム（SNS）上のframe内で動作します。 アプリの表示位置移動をwindow.window.scrollToが使用できないので location.hashを使用して行なっているのですが、IEでlocation.hash を使用するとブラウザの戻るボタンが挙動が意図しない動作になります。 オンロード時に以下の処理を実行します。 onload() { location.hash="#PageTop"; // アプリのトップを画面のトップに移動する 以降の処理 } この後、戻るボタンをクリックしても前の頁には戻らす、onload()の処理が 実行されます。 firefox、Chromeなどは前のページに戻ってくれるのですがIEだと 上記のようになり無限ループのような状況になります。 オンロード時に「アプリのトップを画面のトップに移動する」処理は必須であり ますのではずせません。 他に頁内移動する方法か、IEでlocation.hashを設定しても前の頁に戻れる 方法がお分かりの方、お教えいただくと非常に助かります。
- 締切済み
- mstokwave
- JavaScript
- 回答数3
- フォームに入力した文字を挿入して出力する方法
フォームに入力した文字を挿入して出力する方法 JavaScript初心者です。 複数のフォームに入力した文字をタグなどに挿入して、 テキストエリアに出力するにはどうしたらいいのでしょうか？ ↓出力例 <table> <tr><td><a href="あああ">いいい</a></td></tr> <tr><td><a href="あああ">ううう</a></td></tr> （改行） <tr><td><a href="えええ">いいい+ううう</a></td></tr> </table> よろしくお願いいたします。
- ベストアンサー
- akatsuki_11
- JavaScript
- 回答数3
- IDごとに個別のDIVを表示させる方法
http://www.skyrocketlabs.com/articles/jdiv-a-jquery-navigation-menu-alternative.php こちらのチュートリアルにあるドロップダウン式のナビを勉強のために作っております。 デモ版は1つの行でつくられているのですが、こちらのチュートリアルを応用し、同じようなナビを何行も続けて縦に重ねていく形を作りたいのです。 この場合、提供されているサンプルをどのようにいじればよいでしょうか？ デモ内では <li><a href="#" id="menu1">Rollover me!</a></li> ここにマウスを載せると <div id="hidden-div"> が表示される形になっていると思うのですが、 例えばこれを、 <li><a href="#" id="menu1">Rollover me!</a></li> .....<div id="hidden-div1"> <li><a href="#" id="menu2">Rollover me!</a></li> .....<div id="hidden-div2"> <li><a href="#" id="menu3">Rollover me!</a></li> .....<div id="hidden-div3"> menu（数字）ごとに、その下の個別の<div id="hidden-div（数字）">を出したいのです。 未だ知識が浅いため、いろいろいじくってはいるのですが、どうにも解決できません。 どなたかご教授お願いします。
- ベストアンサー
- carsea802
- JavaScript
- 回答数1
- javascriptによるランダム画像表示のリンク指定について教えて頂
javascriptによるランダム画像表示のリンク指定について教えて頂きたく投稿しました。 以下のサイトを参考に作成したのですが、 http://www.geocities.jp/sii_side/chie/20090308/ 画像に任意のリンクを貼りたいと思っているのですが、なかなかうまくいきません（泣） よろしくご教授ください
- ベストアンサー
- anche
- JavaScript
- 回答数2
- 画像がフェードイン・アウトするクラスの作り方教えて．．
前置き：別に困っているわけでもありません ・こんな質問許されないかも（ご容赦を） ・自分で勉強しろと言われるかも（ごもっとも） ・ごみプログラムがさらにごみプログラムを生んでいるかも（ごめんなさい） 本題： いつぞやのタイトルくるくるのサンプルを基に、画像がフェードイン、 フェードアウトするオブジェクト指向っぽいスクリプトを作りました。 下のソースです。スタイル属性の変更をwindow.setIntervalを使って counter値に達するまでループ実行しているだけです。 似たような処理のfadeinクラスとfadeoutクラスを作って、 fadein.start(ターゲット,インターバルミリ秒); fadeout.start(ターゲット,インターバルミリ秒); でフェードイン、フェードアウトを開始していますが、 fadeinクラスとfadeoutクラスをfadeinoutクラス一つにまとめちゃって、 fadeinoutクラスのメソッド(?)としてfadein、fadeoutを使えるように するには、どうやって作ればよいのかと言うのが質問です。 本当は、 var myobj = new fadeinout(ターゲット,インターバルミリ秒); とインスタンスして myobj.fadein; myobj.fadeout; みたく使うためのコーディングがよくわからんのです。 抜本的に書き換えた方がよいのでしょうか... ＜作ったサンプル＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- var fadein = function (node,interval){ this.counter = 0; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( ++this.counter>100) this.stop(); }; }; var fadeout = function (node,interval){ this.counter = 100; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( --this.counter<0) this.stop(); }; }; fadein.start = function(target,interval){ new fadein(target,interval ); } fadeout.start = function(target,interval){ new fadeout(target,interval ); } function fadein_s(){ var target=document.getElementById("target"); fadein.start(target,1); } function fadeout_s(){ var target=document.getElementById("target"); fadeout.start(target,1); } // --> </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>
- ベストアンサー
- yyr446
- JavaScript
- 回答数6
- 画像がフェードイン・アウトするクラスの作り方教えて．．
前置き：別に困っているわけでもありません ・こんな質問許されないかも（ご容赦を） ・自分で勉強しろと言われるかも（ごもっとも） ・ごみプログラムがさらにごみプログラムを生んでいるかも（ごめんなさい） 本題： いつぞやのタイトルくるくるのサンプルを基に、画像がフェードイン、 フェードアウトするオブジェクト指向っぽいスクリプトを作りました。 下のソースです。スタイル属性の変更をwindow.setIntervalを使って counter値に達するまでループ実行しているだけです。 似たような処理のfadeinクラスとfadeoutクラスを作って、 fadein.start(ターゲット,インターバルミリ秒); fadeout.start(ターゲット,インターバルミリ秒); でフェードイン、フェードアウトを開始していますが、 fadeinクラスとfadeoutクラスをfadeinoutクラス一つにまとめちゃって、 fadeinoutクラスのメソッド(?)としてfadein、fadeoutを使えるように するには、どうやって作ればよいのかと言うのが質問です。 本当は、 var myobj = new fadeinout(ターゲット,インターバルミリ秒); とインスタンスして myobj.fadein; myobj.fadeout; みたく使うためのコーディングがよくわからんのです。 抜本的に書き換えた方がよいのでしょうか... ＜作ったサンプル＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- var fadein = function (node,interval){ this.counter = 0; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( ++this.counter>100) this.stop(); }; }; var fadeout = function (node,interval){ this.counter = 100; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( --this.counter<0) this.stop(); }; }; fadein.start = function(target,interval){ new fadein(target,interval ); } fadeout.start = function(target,interval){ new fadeout(target,interval ); } function fadein_s(){ var target=document.getElementById("target"); fadein.start(target,1); } function fadeout_s(){ var target=document.getElementById("target"); fadeout.start(target,1); } // --> </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>
- ベストアンサー
- yyr446
- JavaScript
- 回答数6