この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 クールなフロントエンドページのスライド検証を共有する 以前にも投稿しましたが、こちらは別のものですが、特殊効果が異なります またはコード上で直接: <%@ ページ contentType="text/html;charset=UTF-8" language="java" %> <html> <ヘッド> <title>タイトル</title> <スタイル> /* スライド コントロール コンテナー、灰色の背景 */ #ドラッグコンテナ{ 位置: 相対的; 表示: インラインブロック; 背景: #e8e8e8; 幅: 300ピクセル; 高さ: 33px; 境界線: 2px 実線 #e8e8e8; } /* スライダーの左側、緑の背景*/ #ドラッグBg{ 位置: 絶対; 背景色: #7ac23c; 幅: 0px; 高さ: 100%; } /* スライド検証コンテナテキスト*/ #ドラッグテキスト{ 位置: 絶対; 幅: 100%; 高さ: 100%; /* テキストを水平方向に中央揃えにする */ テキスト配置: 中央; /* テキストは垂直方向に中央揃えされます。パーセンテージは div の高さではなく元の行の高さに対する相対値であるため、ここではパーセンテージは使用できません。*/ 行の高さ: 33px; /* テキストは選択できません */ ユーザー選択: なし; -webkit-user-select: なし; } /* スライダー*/ #ドラッグハンドラ{ 位置: 絶対; 幅: 40px; 高さ: 100%; カーソル: 移動; } /* スライダーの初期背景 */ .dragHandlerBg { background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg=="); } /* 検証が成功するとスライダーの背景に√が表示されます*/ .dragHandlerOkBg { background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg=="); } </スタイル> </head> <本文> <div id="dragContainer"><!-- コンテナの初期背景 --> <div id="dragBg"></div><!-- 緑の背景 --> <div id="dragText"></div><!-- スライド コンテナー テキスト --> <div id="dragHandler" class="dragHandlerBg"></div> </div> <!-- スライダーの初期背景 --> </本文> <スクリプト> //Load(ページが読み込まれた後にイベントがトリガーされます) window.onload = 関数() { // スライド コントロール コンテナー (灰色の背景) を取得します。var dragContainer = document.getElementById("dragContainer"); //スライダーの左側部分(緑の背景)を取得します。var dragBg = document.getElementById("dragBg"); // スライディング検証コンテナのテキストを取得します。var dragText = document.getElementById("dragText"); //スライダーを取得します var dragHandler = document.getElementById("dragHandler"); //スライダーの最大オフセット = スライディング検証コンテナのテキストの長さ - スライダーの長さ var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth; //検証が成功したかどうか var isVertifySucc = false; ドラッグを初期化します。 関数initDrag() { // スライディング検証コンテナのテキストに「スライダーをドラッグして検証」と記入します dragText.textContent = "確認するにはスライダーをドラッグしてください"; //スライダーにマウスダウンリスナーを追加します。dragHandler.addEventListener("mousedown", onDragHandlerMouseDown); } //スライダー関数を選択する onDragHandlerMouseDown() { //マウスの動きの監視 document.addEventListener("mousemove", onDragHandlerMouseMove); //マウスリリースリスナー document.addEventListener("mouseup", onDragHandlerMouseUp); } //スライダー移動関数 onDragHandlerMouseMove() { /* html要素にはwidth属性がなく、clientWidthのみがあります。 offsetX は現在の要素に対する相対値、clientX と pageX は親要素に対する相対値です*/ //スライダーの移動 var left = event.clientX - dragHandler.clientWidth / 2; // if(左 < 0) { 左 = 0; //スライダーの動きがスライダーの最大オフセットより大きい場合は、検証成功関数を呼び出します} else if(left > maxHandlerOffset) { 左 = maxHandlerOffset; 成功を検証します。 } //スライダーの移動 dragHandler.style.left = left + "px"; //緑の背景の長さ dragBg.style.width = dragHandler.style.left; } //スライダー機能を解放する function onDragHandlerMouseUp() { //マウスの動きのリスニングを削除します。 document.removeEventListener("mousemove", onDragHandlerMouseMove); //マウスリリースリスナーを削除します document.removeEventListener("mouseup", onDragHandlerMouseUp); //スライダーの動きを初期化します。dragHandler.style.left = 0; //緑の背景を初期化します。dragBg.style.width = 0; } //検証成功 function verifySucc() { // マークは成功しましたが、再バインドできません isVertifySucc = false; // コンテナのテキストを白い「検証に合格しました」フォントに変更します。dragText.textContent = "検証に合格しました"; dragText.style.color = "白"; //スライダーの背景を確認します dragHandler.setAttribute("class", "dragHandlerOkBg"); //マウスダウンリスナーを削除します。dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown); //マウスの動きのリスニングを削除します。 document.removeEventListener("mousemove", onDragHandlerMouseMove); //マウスリリースリスナーを削除します document.removeEventListener("mouseup", onDragHandlerMouseUp); // 一致が成功したら、ジャンプ先のページを記述します //window.location.href="success page.html" rel="external nofollow"; }; } </スクリプト> </html> 効果は以下のとおりです 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux のパスワードを紛失した場合にリセットする方法
目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...
この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...
目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...
1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...
1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...
目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...
1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...
この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...
目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...
データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...
1. docker に nginx をインストールします。 docker に Nginx をインスト...