JSタイマーを使用して要素を移動する
|
JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の左側からの距離を格納する変数を宣言し、次に要素が毎回移動する必要がある距離を格納する変数を宣言し、最後にこのメソッドに完了時間を指定することです。取得した値が数値データでない場合は変換する必要があり、変換しないと判定できないことに注意してください。次に、要素が特定の位置に移動した後、負のステップ値を与えると要素が元の位置に戻ることを決定します。 要素が左側または右側に移動したときに回転効果を実現する方法についても考えることができます。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル タイプ="text/css">
*{マージン: 0;パディング: 0;}
本文{位置: 相対;}
＃箱{
幅: 120px;高さ: 120px;背景: 緑;
位置: 絶対;上: 100px;
/* ここで背景画像を移動対象として導入することができます。 */
/* 背景: url(img/paobu_huaban.png) 0 0/100% 100%; */
}
</スタイル>
</head>
<本文>
<button type="button" id="Button">クリックして移動します</button>
<div id="box" style="left: 0px;"></div>
<script type="text/javascript">
var ボタン = document.getElementById("ボタン");
var box = document.getElementById("box");
// 1 回に移動するピクセル数。step はステップの長さを表します。var step = 5;
Button.onclick = 関数(){
var タイマー = setInterval(関数(){
//ボックスの左側の値を取得し、整数に変換します。計算を実行する前に数値に変換する必要があります。
// parseInt は取得した文字列を文字型に変換することを意味します var o_left = parseInt(box.style.left);
//要素をより速く移動させたい場合は、各移動の距離を増やすか、完了時間を短縮することができます。 //ただし、完了時間を短縮する方が効果的です。 var n_left = o_left+step; //毎回 10px 右に移動します
box.style.left = n_left+"px";
if ( n_left>500) { //移動距離が400pxより大きい場合は後退します step = -5;
}そうでない場合(n_left==0){
ステップ = 5;
};
},100);
};
</スクリプト>
</本文>
</html>結果は次のとおりです。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu システムにおけるネットワーク構成ファイルの分析と説明
>>: GolangでMySQLデータベースを操作するための実装コード
推薦する
Linux カーネル デバイス ドライバー システム コールに関する注意事項
/**************************** * システムコール**********...
Eclipse/Tomcat でホットデプロイメントとホットスタートを実装する方法
1. ホット デプロイメント: コンテナの実行中にプロジェクト全体を再デプロイすることを意味します。...
ドロップダウンメニューを実装するためのネイティブ js
ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...
MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明
1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...
Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)
Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...
Linuxネットワーク構成ツールの使用
この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...
Docker を使用して pypi プライベート リポジトリを構築する方法
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する
MySQL proxies_priv（シミュレートされたロール）を使用して同様のユーザーグループ管理...
Docker構成 Alibaba Cloud Container Serviceの操作
Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...
JS でモバイルのインタラクティブ エクスペリエンスを向上させる方法
目次1. 即時フィードバック1.1 ボタンからの即時フィードバック1.2 継続的なフィードバック1....
IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする
序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...
ウェブページ制作でウェブフォントファイルにベクターアイコンを追加する方法
ご存知のとおり、コンピューターには 2 種類の画像があり、1 つはビットマップ、もう 1 つはベクタ...
データベース管理に役立つ 5 つの MySQL GUI ツール
MySQL には多くのデータベース管理ツールがあります。作業効率の向上に役立つ優れた GUI ツール...
MySQLデータファイルの保存場所を表示する方法
次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...