JSはクリックドロップ効果を実装します

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ドラミング効果を実現するJavascript

<<:  Dockerコンテナのセルフスタートを実装する方法

>>:  Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策

推薦する

仮想マシンのLinux初心者がIPを設定し、ネットワークを再起動する

仮想マシンを初めて使用する方や、仮想マシンに Linux をインストールしたばかりの方は、システムが...

CSS の一部のプロパティの前には「*」または「_」が付きます。

CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

Windows プラットフォーム構成 5.7 バージョン + MySQL データベース サービス

ルートユーザーのパスワードを初期化するプロセスと、よくある2つの問題の解決策が含まれています。 1....

MySQL ステートメントロックの実装の分析

概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...

vue.js ベースの QQ チャット ルーム

目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...

Linux 論理ボリューム管理 (LVM) の使用法の概要

ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...

仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...

Dockerコンテナのデータボリュームの詳細な説明

何ですかまず、Docker の概念を見てみましょう。アプリケーションと実行環境をコンテナにパッケージ...

Vue-router プログラムナビゲーションの 2 つの実装コード

ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...

CocosCreatorでスワイプした位置にテクスチャを表示する方法

目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...

JavaScript 関数のコンテキストのルールは何ですか?

目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...

Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順

Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...