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

以下もご興味があるかもしれません: