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データベースを操作するための実装コード
推薦する
Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない
デフォルトでは、Flash は常にページのトップレベルに表示されます。つまり、ページに DHTML ...
MySQL の DDL と DML についての簡単な説明
目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...
JavaScript データ構造 双方向リンクリスト
単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...
MySql バッチに挿入するときにデータの重複を避ける方法
目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...
ブラウザの互換モードでボタン内のテキストが垂直方向に中央揃えにならない問題について簡単に説明します。
XML/HTML コードコンテンツをクリップボードにコピー<ボタンスタイル= "カ...
よくある CSS のヒントと経験談 11 選
1. 画像の下にある数ピクセルの空白を削除するにはどうすればよいですか?コードをコピーコードは次のと...
Vueはスクロールバースタイルを実装します
最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...
MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例
目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...
Vueはタブ切り替えの虫眼鏡効果を実装します
この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...
HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
Linux の chown コマンドと chmod コマンドの違いの詳細な説明
Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...
docker-maven-plugin の詳細な使用方法
目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...
webpackでCSSを分割・圧縮し、リンクでインポートする手順
まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...
W3C チュートリアル (15): W3C SMIL アクティビティ
SMIL は、Web にタイミングとメディアの同期のサポートを追加します。 SMIL は、Web に...
Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します
背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...