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データベースを操作するための実装コード
推薦する
Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード
目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...
CentOS 8 に MariaDB をインストールするための詳細なチュートリアル
MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...
Linux でファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される理由を深く理解する
1 背景最近、ZC706-ARM 開発ボードの Linux システムでコンパイル システム (apt...
Docker クリーニングの一般的な方法と問題点
大規模な開発に Docker を使用する場合でも、クリーンアップ戦略がなければ、ディスクがすぐにいっ...
NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル
Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...
HTML ウェブページの基本コンポーネントの概要
<br />Web ページ上の情報は主にテキストベースです。 Web ページでは、フォン...
Mysql5.7でのスケジュールバックアップの実装
1. MySQL インストール パス D:\xxx\MYSQL\MySQL Workbench CE...
docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル
macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...
ウェブページにコンテンツが多すぎる場合に、下から上へ素早く戻る方法
Web フロントエンド開発では、ページに多くの記事を表示することが避けられません。記事の最後にあるク...
Docker基盤技術の適用に関する詳細な説明 名前空間Cgroup
Docker の基盤技術: Docker の基盤となる 2 つのコア テクノロジーは、名前空間とコ...
ubuntu20.04 LTSにdockerをインストールする方法
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
JavaScript のディープコピーの落とし穴
序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...
Dockerコンテナ間で通信する3つの方法
Docker コンテナは互いに分離されており、相互にアクセスできないことは誰もが知っていますが、依存...
mysql 10進データ型変換の実装
最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...
MySql5.7.18 の文字セット構成の詳細なグラフィック説明
背景：かなり前（2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...