この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 クールなフロントエンドページのスライド検証を共有する 以前にも投稿しましたが、こちらは別のものですが、特殊効果が異なります またはコード上で直接: <%@ ページ 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 のパスワードを紛失した場合にリセットする方法
序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...
MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...
1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...
目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...
目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...
基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...
VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...
今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...
フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...
目次エラーメッセージ原因エラーのデモンストレーション回避策方法1方法2方法3エラーメッセージ現在の場...
1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...
CI を利用してリリース用の Docker イメージをビルドすることで、全員のバージョンリリース効率...
ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...