main.html*************************************

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="css/ffUI.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/ffmain.js"></script>
</head>
<body>
<div id="main">
</div>
</body>
</html>

ffUI.css***************************************
* {margin:0;padding:0;}
#main {width:320px;height:240px;overflow:hidden;}
#map {margin-top:0px;margin-left:0px;}

ffmain.js**************************************

mainFunction();

function mainFunction(){
$("#main").append('<div id="map"><image src="image/maptest.gif"></div>');
$(window).bind("keydown",mainKeyIvent);
}

function mainKeyIvent(e){
switch(e.keyCode){
case(38):
$("#map").animate({marginTop:"+=16px"});
break;
case(40):
$("#map").animate({marginTop:"-=16px"});
break;
case(37):
$("#map").animate({marginLeft:"+=16px"});
break;
case(39):
$("#map").animate({marginLeft:"-=16px"});
break;
}
}


というコードを書いて、RPGのMAPのように、
出した画像が上下左右のキーで16ピクセルずつ動くコードを書いてみたんですが、
一応動きはしますが、キーを押しっぱなしにすると、
その間にキーイベントが蓄積されて、右を押していたら、
キーを離してもずーっと右に動きっぱなしなってしまったりします。

押している間は動き続けてもいいですが、離した瞬間にちゃんと止まるようにしたいんですけど、
どのようにコーディングすればよいでしょうか?

環境はsafariです。


宜しくお願いしますm(__)m

このQ&Aに関連する最新のQ&A

A 回答 (2件)

手っ取り早くやるならstopですかね。



$(window).keyup(function() { $("#map").stop(true); });

引数にtrueを渡せば、実行待ちしているアニメーション処理も削除してくれます。

キーを押し続けるとanimateメソッドが無駄に呼ばれ続け
無駄にキュー登録されますから、止めることを考えるより
無駄に呼び出さない方向で考えないとダメだと思いますけど。
    • good
    • 0
この回答へのお礼

ありがとうございます。
確かにstopも使えそうなんですが、キュー登録自体は増えてしまうのが難点で....

質問後も色々自分で試してみましたが、

function mainKeyIvent_parts(){
$(window).unbind("keydown",mainKeyIvent);
setTimeout(function(){$(window).bind("keydown",mainKeyIvent);},250);
}

という関数を組んで、キー入力があると、250ミリ秒間(これはアニメの速度によって手動調整)キー入力ができないようにしてみたら一応意図通りに動くようになりました。


ただ、stopの時の様にまだ何か落とし穴があるかもしれませんね、
難しい(泣)

お礼日時:2011/04/11 09:01

おそらく、animate() は非同期処理なのでしょう。


http://api.jquery.com/animate/

アニメーション中は keydown しても animate() しないように #map をビジー状態にする必要があります。
animate() 処理に移る前に <div id="map" aria-busy="true"></div> のようにして、aria-busy="true" 中は animate() しないようにしてみてください。
http://www.hitachi.co.jp/universaldesign/wai-ari …
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QPC連動タップを液晶テレビ周りの連動ON/OFF用途に使いたいのですが

PC連動タップを液晶テレビ周りの連動ON/OFF用途に使いたいのですが
テレビ周りのオーディオ・プレイヤーの自動電源ON/OFFにPC連動タップを使用して
自動ON/OFFと考えているんのですが、本来のPC用途とはかけ離れてますが
使用上問題はないでしょうか?

Aベストアンサー

問題はありません、構造上では普通のモノよりは性能が高いはずですから、
蛸足をしない限りは問題はありません。
自分もPCショップや量販店など、製造メーカーに問い合わせをした所では、
「問題は無い」との回答されました。

QHTMLに書き込むことなく、イベントを制御する方法

よく、HTMLに
<img src="yyy.gif" onMouseover="this.src='xxx.gif'">
というふうにイベントハンドラを設定するのを見かけますが、
<script>タグ内で
document.onclick = 関数名;
となっているのもあります。

後者の方が、スマートのような気がするのですが、その書き方とか、仕様をしっかり理解できてないようなので質問します
おそらく、これに限らず基礎的なことだと思います

1、
document.onclick = の後に指定できるのは、関数名の他に何があってどう書くのか?

2、
document.onclick = funcEx();
としないで
document.onclick = funcEx;
とするのはなぜか?
引数は設定できないのか?

3、
<script>内から、指定した要素のイベントを制御する方法がほかにあれば
教えてください

以上、どれかひとつでも、複数でもいいので、回答もらえるとありがたいです

Aベストアンサー

1)
XXXX.onclick=function(){…}
というように名前のない関数(イベントだけで使われるので、特に名前が必要ない)が書けます。(関数リテラルといいます)

2)
関数オブジェクトにカッコを付けると関数呼び出しになります。
引数は関数定義の方で設定しておきます。
イベントハンドラへの登録なので、この時には引数を設定する意味はありません。
イベントで呼び出される関数に引数が必要かどうかは、ブラウザによっても違います。ネットスケープ系だとイベントを引数で受けて、例えば押されたキーなどを取得することができます。IEでは、イベントは、イベントハンドラないでwindow.eventを使用するので、引数では受けません
(ポインタといっていいかどうかは微妙ですが、javascriptではポインタ型のタイプはありません、関数オブジェクトです)

3)IEの場合
<SCRIPT FOR="test" EVENT="onmouseover" type="text/javascript">
window.event.srcElement.style.fontWeight="bold";
</SCRIPT>
<SCRIPT FOR="test" EVENT="onmouseout" type="text/javascript">
window.event.srcElement.style.fontWeight="normal";
</SCRIPT>
<a href="#" ID="test">test</a>
のように、IDで指定したモノのイベントの種類を指定してスクリプトを設定することができます。

1)
XXXX.onclick=function(){…}
というように名前のない関数(イベントだけで使われるので、特に名前が必要ない)が書けます。(関数リテラルといいます)

2)
関数オブジェクトにカッコを付けると関数呼び出しになります。
引数は関数定義の方で設定しておきます。
イベントハンドラへの登録なので、この時には引数を設定する意味はありません。
イベントで呼び出される関数に引数が必要かどうかは、ブラウザによっても違います。ネットスケープ系だとイベントを引数で受けて、例えば押されたキーなどを...続きを読む

Qタップに詳しい方 おおしえください。

自動機で下穴をあけた後タップをとうしました。バリが出たため ハンドドリルでタップをとうしたのですが、ネジ山が二重になったり、ハ゛リもでてしまいました、油を付けながら 逆回転させながら 慎重に入れ 軽く入ったつもりですが、だめです。どうしてですか、おしえてください。再、再、回答できる方おねがいします。

Aベストアンサー

acha51補足です

質問を読み返してみるとタップも自動機で切った後の事でしょうか。
出るバリは表面だったら先の回答のバリ取り
ねじ山のバリだったら、
・自動機のタップへたりの場合はタップを交換し新規にやり直しましょう
・制御プログラムの場合は回転数と送りの関係を見直しましょう。
・わずかな場合はsusなどの固い材料のボルトを2-3回通す
・多いバリだったら先の1-3番をタップハンドルで順に通す
  職人技ですのでトレーニングしてやります

いずれにしても材料と深さ、径くらいははっきり書いた方が良いでしょう

Q親フレームからkeydownイベントの取得

現在フレームで2分割にされたページを作成しています。

ページ全体でkeydownイベントを取得したいので、親フレームにkeydownイベント取得の処理は埋め込んだのですが、keydownイベントを取得できませんでした。

分割された子ページにそれぞれ処理を埋め込めばよいのでしょうが、諸事情により分割された片方のページにはjavascriptを埋め込めません(片方には埋め込み可です)。

このような状況で親フレームにてkeydownイベントを取得することは無理なのでしょうか?
動作自体が実現できるなら、必ずしも親フレームに処理を埋め込まなくてもいいです(埋め込める子ページに埋め込むなどなど)。

Aベストアンサー

ご質問の内容がよくわかりませんが、とりあえずこんなんじゃダメでしょうか?

--親文書--
<html>
<head>
<title>test</title>
<script type="text/javascript">
function set(f) {
var fd = f.contentDocument || f.contentWindow.document;
fd.onkeydown = test;
}
function test() { alert('keyDown!'); }
</script>
</head>
<frameset cols="50%,*">
<frame src="frameA.html" name="frameA" onload="set(this)">
<frame src="frameB.html" name="frameB" onload="set(this)">
</frameset>
</html>

意味が違っていたら無視願います。

QPC連動タップについて

こんにちは

私はADSLモデム、ルーター及びプリンタの3種類の周辺機器をパソコンのON/OFFと連動してON/OFFしたいと考えています。(通常はパソコン及びこれら周辺機器の電源はOFFにしておき、パソコンを立ち上げると自動的に周辺機器の電源もONになり使える状態になる様にしたい)

ここで各メーカーから発売されているPC運動タップについて質問なのですが、このタップにこれら周辺機器をつなげば上述の私のやりたい事が実現するのでしょうか?(特に私が知りたいことは、PC運動タップは、単にタップを通電させるだけでなく、それにつながったパソコン周辺機器自体の電子スイッチをONにして周辺機器を使える状態にさせることが可能かどうかという点です。(機械式(手動式)スイッチ付タップとは違うか?という点です)

実際にPC運動タップを使用し周辺機器のPC運動起動を実現されている方がいらっしゃったらぜひ教えて下さい。

よろしくお願いします。

Aベストアンサー

PC連動タップは、「PC専用コンセント」に接続されたPCの電源が入って電流が流れると、他の「連動コンセント」がONになる仕組みです。
http://www.sanwa.co.jp/product/oatap/rendo.html

連動させるには電源スイッチがONの状態で、「コンセントを差せば電源が入る」周辺装置でないと使用できません。
(コンセントを差した後、onのボタンを押さないといけないプリンタは×です)

QjQuery.jsを使ったhtml外部読み込み方法

JavaScript超初心者です。
何卒ご協力の程よろしくお願い致します!!

タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。

以下のページを参考にやってみましたが上手くいきません。
http://blog.sugulab.com/?p=14



やってみたのは下記のような作業です。

まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。
http://jquery.com/download/

次に参照ページにならってhead要素内に下記のように記述しました。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
<!–
$(function(){
$("#leftcontent").load("shopmenu.html");
});
// –>
</script>


body要素内には<div id="leftcontent"></div>と記述しています。

このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。

PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・

ド素人の為、見当違いのご質問でしたらご容赦ください。
どなたかご教示、アドバイスの程よろしくお願い申し上げます!!m(*u_u*)m

JavaScript超初心者です。
何卒ご協力の程よろしくお願い致します!!

タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。

以下のページを参考にやってみましたが上手くいきません。
http://blog.sugulab.com/?p=14



やってみたのは下記のような作業です。

まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。
http://jquery.com/download/

次に参照ページにならってhead要...続きを読む

Aベストアンサー

こんにちは。

<script type="text/javascript">
<!–
$(function(){
$("#leftcontent").load("shopmenu.html");
});
// –>
</script>

ではなくて

<script type="text/javascript">
<!--
$(function(){
$("#leftcontent").load("shopmenu.html");
});
// -->
</script>

です。

<!--
//-->

これで括ります。
(くくらなくてもほぼ大丈夫ですけどね)

QHSHギターのタップ

 HSHギターのタップですが、5wayセレクターの両端いずれかを選択して、そこからスイッチなどで片方のコイルをアースに流すのが定番になっていますよね? そこでふと疑問に思ったことが。

 普通、HSH配列のギターは、ハーフポジションの時は自動でタップされています。故に、HSHの真ん中のPUをオフにするスイッチを付けた場合でも、リア(フロント)のシングル単体の音がでるのではないか、ということです。

 これなら通常の2WAYのスイッチで切り替えることができるので、手っ取り早いと思うのですが……知っている限りこの配線でタップをしている機種はありません。なにか理由があるのでしょうか?(特に音質面で)

Aベストアンサー

「ストラトでもハムバッキングPUのパワフルかつウォームな音がほしいが、(ストラトの売りの一つである)ハーフトーンはシングルコイル同士のパラレルがいい」というユーザーを優先している為でしょう。

>普通、HSH配列のギターは、ハーフポジションの時は自動でタップされています。故に、HSHの真ん中のPUをオフにするスイッチを付けた場合でも、リア(フロント)のシングル単体の音がでるのではないか、ということです。
→可能だと思います。ただスイッチが2個存在することに変わりありません。ですので「手っ取り早い」とは私は思いませんが(笑)。
尚、これは私の推測ですが、音が出ないスイッチポジションが存在するギターをメーカーが好まないのではないでしょうかね。ブライアン・メイのRed Specialは自作だけあって特殊なケースですね。

Qネスケではdocument.main.日本語.valueは絶対だめ?

下記のように日本語のテキストボックスの場合、ネスケではエラーになってしまいますが、日本語のままでできる裏技はないものでしょうね・・・。

function zipsearch()
{
n = document.main.郵便番号.value;
subWin = window.open('zipsearch.cgi?zip=' + n ,"zipsearch","width=300,height=100")
}

Aベストアンサー

それ以前にNetscape以外でも日本語は使わない方がいいですよ。
ただでさえ日本語処理にはバグや妙な仕様が多いですから。

どうしても日本語を使いたいのなら、属性名ではなく、値の扱いをすればなんとかなるのではないでしょうか。
n = document.main["郵便番号"].value;
ただ、どちらにせよこのCGIにGETメソッドで渡す動作はうまくいかないと思います。
nの内容がURLエンコードされませんので。

このエンコードに関することは、ブラウザに任せるのが最良、というのが私の意見です。
JavaScriptでもescape()やencodeURI()等の一見使えそうな関数がありますが、
実は文字コードの問題でうまく動作しません。
なので、既存のフォームと異なる動作を実現する場合にはFORMを動的に生成する、等の手法が必要になります。
単にFORMを新しいページにsubmitしたいのであれば、HTMLの記述で
<FORM target="_blank ...>
とすればOKです。

Qパソコンが自動的に立ち上がる

いつもお世話になっております。現在デスクトップパソコンを10年ほど使用しております。パソコン、モニター、プリンターをOAタップにつなぎ、タップの電源でシャットダウンした後、電源を切っていたのですが、最近OAタップの電源をオンにしたと同時にパソコンの電源が自動的に入り、BIOSセットアップメニューが立ち上がるようになり、また時刻も1998年の1月1日の0時となってしまうのです。マニュアルとか引っ張り出して読んでみたのですが、症例も載っておらず悩んでます。対処方法等ご存じの方おられましたら、ご教示お願いします。

Aベストアンサー

電池切れのためです。
Biosのセットアップ情報のバックアップや、RTC(時計)を駆動する
電池(CR2032など)が、PCの中に入っていますが、この電池が
消耗したのです。
PC内部を見て、コイン型の銀色の丸型の電池を探して同じものに
交換してください。

NECのPC90x1だと、ニッカド電池(充電式電池)の場合もあります。
この場合なら、OAタップの電源を入れたままにしてください。
省エネ(エコ)の為に電源を切っていると思いますが、毎日の
使用時間が少ないために、充電不足になっていると思われます。
(OAタップで電源を切らなければ、PCを使わなくても充電される)

当時のPCの待機電力は3W程度ですので、一月約50円位です。

QフォームからjQuery,jQuery.jsonを使ってJSONを作っ

フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。
こんばんは。2、3日ずっと悩んでて解決しないので助けてください。
jQuery,jQuery.jsonを使ってJSONを作成しています。
クリックイベントに
var form = $("#sform");
var json = $(form.serializeArray());
var strJson = $.toJSON(json);
という形をとって
$.ajax({
url : "request.php",
type : "post",
data : strJson,
success: function(request){
$('#result').html(request);
}
});
で送っています。
ただPHP側で
var_dump($_POST);
を行ってもArray ( ) と表示されます。
firebugで見たところpostに入っているデータは以下の通りです。
{"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4}

var_dumpで表示できないのはなぜでしょうか?
上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。
ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。
基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。
よろしくお願いします。

フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。
こんばんは。2、3日ずっと悩んでて解決しないので助けてください。
jQuery,jQuery.jsonを使ってJSONを作成しています。
クリックイベントに
var form = $("#sform");
var json = $(form.serializeArray());
var strJson = $.toJSON(json);
という形をとって
$.ajax({
url : "request.php",
type : "post",
data : strJson,
success: function(request){
...続きを読む

Aベストアンサー

「var json = $(form.serializeArray());
このデータを送るのが一番標準ということでいいのでしょうか?」

=>そうです。わざわざJSONオブジェクトに作り変える必用は無いです。
  .serializeArray()で、jQueryが、JSON形式の文字列データに変換して
  くれてるんです。

「phpで json_decodeしなくてもデータがそのまま二次元配列で渡っている」

=>そう思ってもよいでしょう。正しくは、二次元配列の形式に格納する
  形式の文字列データで渡っているですが

 PHPで、
echo file_get_contents("php://input");
 として見れば、送信されてくる文字列データが見れます。


人気Q&Aランキング