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データベースを操作するための実装コード
推薦する
Windows での Maven のインストールと構成に関するグラフィカル チュートリアル (ローカライズされたウェアハウス構成を含む)
1. MavenをダウンロードするMaven 公式サイト: http://maven.apache...
Linux システムファイル共有 samba 設定チュートリアル
目次sambaをアンインストールしてインストールする新しい共有パスを作成し、権限を設定するSamba...
Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法
昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...
Docker コンテナの uid と gid の詳細な理解
デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...
優れたWebフォームデザイン事例20選
ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...
Zabbix による VMware Exsi ホストの監視のグラフィカルな手順
1. 仮想化 vcenter に入り、ブラウザでログインし (クライアントは設定する場所を見つけませ...
docker cp ファイルをコピーしてコンテナに入る
実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...
MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
JS クロスドメイン ソリューション React 構成 リバース プロキシ
クロスドメインソリューションjsonp (get をシミュレート) CORS (クロスオリジンリソー...
.html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
フックを使用して React コンポーネントを書くときに注意すべき 5 つの点
目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...
Axiosは繰り返しのリクエストをキャンセル
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
フローティングをクリアするいくつかの方法（推奨）
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...
露滴アニメーション効果を実装するための Three.js サンプル コード
序文みなさんこんにちは。CSS ウィザードの alphardex です。この記事では、three.j...
Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法
導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...