最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。 まず、水平スライダーを見てみましょう。効果は次のとおりです。 コードは次のとおりです。 <html> <ヘッド> <メタ文字セット="UTF-8"> <title>水平スライダー</title> <スタイル> * { マージン: 0; パディング: 0; } .スクロール{ マージン: 100px; 幅: 500ピクセル; 高さ: 5px; 背景: #ccc; 位置: 相対的; } 。バー { 幅: 10px; 高さ: 20px; 背景: #369; 位置: 絶対; 上: -7px; 左: 0; カーソル: ポインタ; } p{ 左マージン: 100px; } </スタイル> </head> <本文> <div class="scroll" id="scroll"> <div class="bar" id="bar"> </div> </div> <p></p> <スクリプト> //要素を取得します var scroll = document.getElementById('scroll'); var bar = document.getElementById('bar'); var ptxt = document.getElementsByTagName('p')[0]; bar.onmousedown = 関数(イベント) { var イベント = イベント || window.event; // ページ イベントの X から、最も近い祖先を基準とした現在の位置にある要素を引いた値 var x = event.clientX - this.offsetLeft; document.onmousemove = 関数(イベント) { var イベント = イベント || window.event; var 左 = event.clientX - x; (左 < 0)の場合 左 = 0; そうでない場合 (left > scroll.offsetWidth - bar.offsetWidth) { 左 = scroll.offsetWidth - bar.offsetWidth; } //スライダーの左の位置を変更する bar.style.left = left + "px"; ptxt.innerHTML = "現在のスライダーの移動率: " + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%"; //選択を禁止する window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } //マウスがポップアップしたときは何もしない document.onmouseup = function() { ドキュメント.onmousemove = null; } </スクリプト> </本文> </html> 垂直スライダーの効果は次のとおりです。 コードは次のとおりです。 <html> <ヘッド> <メタ文字セット="UTF-8"> <title>垂直スライドバー</title> <スタイル> * { マージン: 0; パディング: 0; } 。スクロール{ マージン: 100px; 幅: 5px; 高さ: 320px; 背景: #ccc; 位置: 相対的; } 。バー { 幅: 15px; 高さ: 5px; 背景: #369; 位置: 絶対; 上: 0px; 左: -5; カーソル: ポインタ; } p{ 左マージン: 100px; } </スタイル> </head> <本文> <div class="scroll" id="scroll"> <div class="bar" id="bar"> </div> </div> <p></p> <スクリプト> //要素を取得します var scroll = document.getElementById("scroll"); var bar = document.getElementById("bar"); var ptxt = document.getElementsByTagName('p')[0]; //イベントを追加 bar.onmousedown = function(event) { var イベント = イベント || window.event; // ページ イベントの Y から、最も近い祖先を基準とした現在の位置にある要素を引いた値 var y = event.clientY - this.offsetTop; //ドラッグは下に書き込む必要があります document.onmousemove = function(event) { var イベント = イベント || window.event; //移動距離を取得します。var top = event.clientY - y; (トップ < 0){ 上 = 0; } そうでない場合 (top > scroll.offsetHeight - bar.offsetHeight){ 上部 = scroll.offsetHeight - bar.offsetHeight; } //スライダーの上部を変更する bar.style.top = top + "px"; // パーセンテージに応じて現在のスライド距離を取得します。 ptxt.innerHTML = "現在のスライダーの移動パーセンテージ: " + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%"; //選択を禁止する window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } //マウスがポップアップしたときは何もしない document.onmouseup = function() { ドキュメント.onmousemove = null; } </スクリプト> </本文> </html> ここで移動パーセンテージ表示効果を追加した理由は、主に将来的にバックグラウンドデータに接続する必要がある場合に動的制御の目的を達成するためです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLデータベースのnullに関する知識ポイントのまとめ
>>: Nginx フォワードプロキシとリバースプロキシの違いと原理分析
このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクト...
apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...
1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...
JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...
前書き: 最近、私はパートナーとチームを組んで .NET Core プロジェクトに取り組む予定です。...
注: 現在、最も人気のフロントエンド フレームワークは Bootstrap と Foundation...
目次操作方法操作プロセス既存のテーブルにパーティション テーブルを作成し、データを新しいテーブルに移...
入力ボックス内のカーソルのサイズが一定ではありませんIE7とChromeの違いは非常に明白ですまず、...
MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...
主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...
1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...
ここに <input type="image"> がある場合、この画...
1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...