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 が起動しない場合の解決策
推薦する
docker で nginx+php+mysql を設定する方法
まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...
MySQLを定期的にバックアップしてQiniuにアップロードする方法
ほとんどのアプリケーション シナリオでは、緊急時に備えて重要なデータをバックアップし、安全な場所に保...
Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)
最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...
Webフロントエンド開発におけるエラーを見つけるための基本的な考え方
WEB開発は主に2つのインタラクション（B/Sデータ）から構成されますブラウザ： 1html、css...
Ckeditor + Ckfinderを使用したJavaScriptファイルアップロードケースの詳細な説明
目次1. 準備2. 減圧3. 統合を開始する1. 準備Ckeditor_4.5.7_full + C...
単一テーブルのMySQLバックアップとリストアに関する簡単な説明
A. MySQLバックアップツールxtrabackupのインストール1. Percona 公式 xt...
Webサービスのリモートデバッグとタイムアウト動作原理の分析
Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...
React プロジェクトにおける TypeScript の使用の概要
序文この記事では、TS の基本的な概念ではなく、プロジェクトで TypeScript (以下、TS ...
MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
CentOS6 アップグレード glibc 操作手順
目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...
MySQLストレージ時間タイプの選択に関する問題の説明
MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...
Vue はグラフィック検証コードログインを実装します
この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...
Dockerコアとインストールの具体的な使い方
1. Docker とは何ですか? （1）DockerはLinuxコンテナ内でアプリケーションを実行...
Dockerでnginxを実行し、ローカルディレクトリをイメージにマウントする方法
1 hupからイメージを取得する docker プル nginx 2 マウントするディレクトリを作成...
大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション
MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...