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はプライベートライブラリイメージを完全に削除します
まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...
JavaScript の基礎: 即時実行関数
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
JSフロントエンドモジュール化のいくつかの仕様についての簡単な説明
目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...
Idea で Docker を使用して SpringBoot プロジェクトをデプロイする詳細な手順
序文プロジェクト要件: Dockeridea に Docker プラグインをインストールし、Dock...
MySQL で null 値と空文字 ('') を区別する
日常の開発では、データベースの追加、削除、変更、クエリが一般的に行われるため、Mysql で NUL...
Docker で ElasticSearch をデプロイする方法
1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...
変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード
序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...
順序再構築に関する簡単な説明: MySQL シャーディング
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方
Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...
Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法
導入：この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)
開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...
MySQLのユーザー管理とPostgreSQLのユーザー管理の違い
1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...
jsプロキシの原理の詳細な説明
目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...
Docker での Tomcat インストールの 404 問題の解決方法
tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...