jsは水平および垂直スライダーを実現します

jsは水平および垂直スライダーを実現します

最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。

まず、水平スライダーを見てみましょう。効果は次のとおりです。

コードは次のとおりです。

<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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。
  • スライダーを作成するためのネイティブ js ドラッグ アンド ドロップ機能のサンプル コード
  • 水平画面と垂直画面を判断し、ブラウザのスライドバーを禁止するjsの例

<<:  MySQLデータベースのnullに関する知識ポイントのまとめ

>>:  Nginx フォワードプロキシとリバースプロキシの違いと原理分析

推薦する

JavaScript関数におけるこのポイントの問題の詳細な説明

このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクト...

Ubuntu 18.04 で apt-get ソースを変更する方法

apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...

Ubuntu 18.04 (物理マシン) で OpenWRT 開発環境を構成する方法

1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

Linux での MySQL 5.7 の導入とリモート アクセス構成

前書き: 最近、私はパートナーとチームを組んで .NET Core プロジェクトに取り組む予定です。...

ツールキット: Bootstrap よりも強力なフロントエンド フレームワーク

注: 現在、最も人気のフロントエンド フレームワークは Bootstrap と Foundation...

MySQLはデータテーブル内の既存のテーブルを分割します

目次操作方法操作プロセス既存のテーブルにパーティション テーブルを作成し、データを新しいテーブルに移...

入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法

入力ボックス内のカーソルのサイズが一定ではありませんIE7とChromeの違いは非常に明白ですまず、...

MySql5.x を MySql8.x にアップグレードする方法と手順

MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...

Ubuntu 19でdockerソースをインストールできない問題を共有する

主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

フォーム OnSubmit と input type=image の使用の概要

ここに <input type="image"> がある場合、この画...

Hbase 入門

1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...