矢印キーをバインドして div の移動を制御する方法
今回は、div の動きを制御するために方向キーをバインドする方法と、div の動きを制御するために方向キーをバインドするときの注意点について説明します。ここでは実際的なケースを見てみましょう。見て。
CSS で、DOM 要素の <a href="http://www.php.cn/wiki/902.html" target="_blank">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>属性为absolute或relative时，我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置。
利用上述属性，我们可以简单实现一个元素在页面中的移动效果，这里我们采用JQuery的animate方法来实现动画效果，利用keydown监听方向键按下的事件（这里采用keydown而不是keyup，是为了能够在方向键被一直按着时，元素一直移动，keydown是监听按下事件，keyup是监听按键释放事件）。这里我们还可以利用animate 属性が 絶対または相対。このを変更できます。 element left 属性と top 属性の特定の値は、ページ上で要素が表示される位置を制御します。 上記の属性を使用すると、ページ上の要素の移動効果を簡単に実現できます。ここでは JQuery
animate メソッドはアニメーション効果を実現するために使用され、keydown は方向キーが押されたイベントを監視するために使用されます (ここでは、 keyup の代わりに keydown が使用されています。これは、方向キーが常に押されているときに要素を動かし続けるためです。 keydown は押下イベントを監視し、 keyup はキー リリース イベントを監視します。 。ここでは、animate メソッドの機能を利用することもできます。つまり、その属性の値が「+=」または「-=」の場合、最初に元の値に基づいて計算されます。対応する属性を考慮すると、これは C++ の operator
と一致します。 コア コードは次のとおりです:$(document).keydown(function(event){
var keyNum = event.which; //获取键值
var Item = $('#switcher'); //要移动的元素
Item.css({position:'relative'}); //设置position
switch(keyNum){ //判断按键
case 37: Item.animate({left:'-=20px'});break;
case 38: Item.animate({top:'-=20px'});break;
case 39: Item.animate({left:'+=20px'});break;
case 40: Item.animate({top:'+=20px'});break;
default:
break;
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery控制p移动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p id="switcher" style="width:200px;height:200px;border:solid 1px #000;">
</p>
<script>
$(document).keydown(function(event){
var keyNum = event.which; //获取键值
var Item = $('#switcher'); //要移动的元素
Item.css({position:'relative'}); //设置position
switch(keyNum){ //判断按键
case 37: Item.animate({left:'-=20px'});break;
case 38: Item.animate({top:'-=20px'});break;
case 39: Item.animate({left:'+=20px'});break;
case 40: Item.animate({top:'+=20px'});break;
default:
break;
}
});
</script>
</body>
</html>以上が矢印キーをバインドして div の移動を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1317
25
1268
29
1246
24
appdataフォルダーをDドライブに移動できますか?
Feb 18, 2024 pm 01:20 PM
appdata フォルダーを D ドライブに移動できますか? コンピューターの使用が普及するにつれて、ますます多くのユーザーの個人データやアプリケーションがコンピューターに保存されています。 Windows オペレーティング システムには、ユーザーのアプリケーション データを保存するために使用される appdata フォルダーと呼ばれる特定のフォルダーがあります。多くのユーザーは、データ管理とセキュリティを考慮して、このフォルダーを D ドライブまたは他のディスクに移動できるかどうか疑問に思っています。この記事では、この問題について説明し、いくつかの解決策を提供します。まず、させてください
PHPでカメラを制御：接続から撮影までの全過程を解析
Jul 30, 2023 pm 03:21 PM
PHPでカメラを制御：接続から撮影までを解析 ビデオ通話や監視システムなど、カメラアプリケーションはますます普及しています。 Web アプリケーションでは、多くの場合、PHP を通じてカメラを制御および操作する必要があります。この記事では、カメラの接続から撮影までをPHPを使って実現する方法を紹介します。カメラの接続状態を確認する カメラを操作する前に、まずカメラの接続状態を確認する必要があります。 PHP には、カメラを操作するための拡張ライブラリ ビデオが提供されています。次のコードを渡すことができます
Windows 11 でこの PC によるモバイル デバイスへのアクセスを停止または許可します
Feb 19, 2024 am 11:45 AM
Microsoft は、最新の Windows 11 バージョンで PhoneLink の名前を MobileDevice に変更しました。この変更により、ユーザーはプロンプトを通じてモバイル デバイスへのコンピュータ アクセスを制御できるようになります。この記事では、モバイル デバイスからのアクセスを許可または拒否するコンピューターの設定を管理する方法について説明します。この機能を使用すると、モバイル デバイスを設定してコンピュータに接続し、テキスト メッセージの送受信、モバイル アプリケーションの制御、連絡先の表示、電話の発信、ギャラリーの表示などを行うことができます。携帯電話を PC に接続することは良い考えですか?携帯電話を Windows PC に接続すると、機能やメディアを簡単に転送できる便利なオプションです。これは、モバイルデバイスが利用できないときにコンピュータを使用する必要がある人にとって便利です
6000mAhのシリコンマイナスバッテリー！ Xiaomi 15Proアップグレードが再びリーク
Jul 24, 2024 pm 12:45 PM
7月23日のニュースによると、ブロガーのDigital Chat Stationは、Xiaomi 15 Proのバッテリー容量が6000mAhに増加し、90Wの有線フラッシュ充電をサポートしているというニュースを伝えました。これは、Xiaomiのデジタルシリーズで最大のバッテリーを搭載したProモデルになります。 Digital Chat Stationは以前、Xiaomi 15Proのバッテリーは超高エネルギー密度を持ち、シリコン含有量が競合製品よりもはるかに高いことを明らかにしました。 2023 年にシリコンベースの電池が大規模にテストされた後、第 2 世代のシリコン負極電池が業界の将来の発展方向として特定されており、今年は直接的な競争のピークを迎えます。 1. シリコンの理論グラム容量は 4200mAh/g に達することがあり、これはグラファイトのグラム容量の 10 倍以上です (グラファイトの理論グラム容量は 372mAh/g)。負極の場合、リチウムイオン挿入量が最大に達したときの容量が理論上のグラム容量であり、同じ重量下での容量を意味します。
モバイル グローバル パス カードにはいくつかのレベルがあります
Oct 20, 2022 am 11:24 AM
モバイルグローバルカードは4つのレベルに分かれており、上位から下位までダイヤモンドカード、プラチナカード、ゴールドカード、シルバーカードとなっており、お客様のレベルに応じて権利がマッチングされており、ダイヤモンドカードが最高レベル、上位レベルになるほど権利が付与されます。 、より多くのサービスをお楽しみいただけます。通常の状況では、システムは、過去 1 年間の顧客の消費量とオンライン年齢に基づいて、毎年 1 月 15 日に顧客のグローバル アクセス レベルを自動的に決定します。ダイヤモンド カードを持つ顧客のスコアは 4,000 ポイント以上である必要があります。
151 はチャイナモバイルまたはチャイナユニコムで始まりますか?
Mar 06, 2023 am 11:43 AM
151 で始まる番号は、携帯電話会社の番号セグメントです。 151 はチャイナモバイルの番号ブロックの 1 つであり、2008 年に番号の割り当てを開始し、158、159、150 に続く 4 番目の「13」で始まらない番号ブロックでもあります。ブロック数のリソース不足を緩和するためのものです。
184で始まる携帯番号は仮想番号ですか?
Oct 25, 2022 pm 02:13 PM
Mobile 184 は、仮想オペレータの専用の China Mobile 番号セグメントで始まります。携帯電話番号セグメントの最初の 3 桁は一般にネットワーク識別番号を表し、4 ～ 7 桁は市外局番を表し、8 ～ 11 桁はユーザー固有の番号です。このとき、10 から始まる番号は 10000 Telecom Service Center、10010 China Unicom Service Center、10086 Mobile Service Center などの通信業界向けのサービス番号で、11 から始まる番号は特別なサービス番号です。 110、119など
モバイル ユーザーの星評価のレベルは何ですか?
Oct 20, 2022 am 11:35 AM
モバイルユーザーの星評価は、1つ星、2つ星、3つ星、4つ星、5つ星の5段階に分かれており、5つ星はさらに5つ星ゴールド、5つ星シルバー、5つ星ダイヤモンドに細分化されます。星の評価が高いほど、より多くのサービス特典が得られます。星評価は年に 1 回評価され、1 年間有効です。星評価が調整されると、星評価のサービスも同時に調整されます。
