JSはクリックドロップ効果を実装します
|
jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょう
さっそく始めましょう。
<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>無題のドキュメント</title>
<script src="jquery.js"></script>
<スクリプト>
window.onload = 関数（）{
var str = '';
長さは20です。
var aDiv = document.getElementsByTagName('div');
var タイマー = null;
var 数値 = 0;
( var i=0; i<len; i++ ) の場合 {
str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
}
ドキュメントのbody要素をstrで囲みます。
document.onclick = 関数（）{
clearInterval(タイマー);
タイマー = setInterval( 関数 () {
DM( aDiv[num], 'top', 23, 500 );
数値++;
if ( 数値 === 長さ ) {
clearInterval(タイマー);
}
}, 100 );
};
};
</スクリプト>
</head>
<本文>
</本文>
</html>ここでカプセル化方法を引用しました
関数 DM( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
間隔をクリアします( obj.timer );
obj.timer = setInterval(関数() {
var speed = parseInt(getStyle( obj, attr )) + dir; // ステップの長さ
if ( 速度 > ターゲット && 方向 > 0 || 速度 < ターゲット && 方向 < 0 ) {
速度 = ターゲット;
}
obj.style[attr] = 速度 + 'px';
if ( 速度 == ターゲット ) {
間隔をクリアします( obj.timer );
/*
if ( 終了Fn ) {
終了Fn();
}
*/
endFn && endFn();
}
}, 30);
}クリックアンドドロップ効果を JS で実装する方法についての記事はこれで終わりです。より関連性の高い js クリックアンドドロップコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策
推薦する
MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更
この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...
CSS3 でクールなスライス画像カルーセル効果を実現
今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...
CSS3はグラフィックの落下アニメーション効果を実現します
まずは効果を確認実装コード <div class="box box1"&g...
複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。
目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...
HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細
1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...
MySQL の遅いクエリとクエリ再構築方法の記録
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
Dockerコンテナ内でホストDocker操作を呼び出して実行する
まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...
Winにmysqlをインストールする詳細な手順
この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...
CentOS で MySQL 5.1 を 5.5.36 にアップグレードする
CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...
Nest.js のハッシュと暗号化の例の詳細な説明
0x0 はじめにまず、ハッシュアルゴリズムとは何でしょうか?メッセージやセッション項目など、一部のデ...
mysql8.0.11クライアントがログインできない問題の解決方法
この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...
JavaScript のショートカットのヒント
目次1. 配列を結合する2. 配列をマージする（最初に） 3. 配列の複製4. 構造化分解割り当て5...
CSS で中空マスク レイヤーを実装するサンプル コード
この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...
CSS のフローティング サンプル コードをクリアする方法
概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...
MySQLデータベースエンジンをInnoDBに変更する
PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...