jQuery はピッカーをシミュレートしてスライド選択効果を実現します

この記事では、スライド選択効果を実現するピッカーをシミュレートするjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   html,本文{
    幅: 100%;
    高さ: 100%;
   }
   div{
    ボックスのサイズ: 境界線ボックス;
   }
   。フレックス{
    ディスプレイ: フレックス;
   }
   .請求_セント{
    幅: 100%;高さ: 100%;
    位置: 固定;
    左: 0;
    上: 0;
    zインデックス: 10;
    背景色: #000000;
   }
   .請求セントデータ {
    幅: 100%;
    高さ: 100%;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
   }
   
   .請求_選択{
    幅: 230ピクセル;
    高さ: 257px;
    背景: #FFFFFF;
    位置: 相対的;
    境界線の半径: 3px;
   }
   
   .billing_select_top>div {
    テキスト配置: 中央;
    フォントサイズ: 16px;
    色: #333333;
    パディング: 20px 0;
   }
   
   .billing_select_top>画像{
    幅: 7px;
    高さ: 13px;
    位置: 絶対;
    右: 10px;
    上: 10px;
    z-index: 3; カーソル: ポインター;
   }
   
   .請求選択センター{
    幅: 100%;
    高さ: 141px;
    パディング: 0 20px;
    オーバーフロー: 非表示;
    位置: 相対的;
   }
   
   .billing_select_bot {
    幅: 100%;
    テキスト配置: 中央;
    高さ: 45px;
    行の高さ: 45px;
    背景: #EEEEEE;
    テキスト配置: 中央;
    位置: 絶対;
    左: 0;
    下部: 0;
    zインデックス: 3;
    境界線の半径: 3px;
   }
   
   .billing_select_center>ul {
    マージン: 0 自動;
    表示: ブロック;
    ボックスのサイズ: 境界線ボックス;
    幅: 100%;
    高さ: 100%;
    オーバーフロー:自動;
    パディング: 47px 0;
    位置: 絶対;
    左: 0;
    上: 0;
    zインデックス: 3;
   }
   
   .billing_select_center>ul>li {
    幅: 100%;
    高さ: 47px;
    行の高さ: 47px;
    フォントサイズ: 15px;
    色: #333333;
    テキスト配置: 中央;
    不透明度: .5;
   }
   
   .請求選択境界線 {
    幅: calc(100% - 40px);
    左: 20px;
    高さ: 1px;
    位置: 絶対;
    上: 47px;
    背景色: #F2F2F2;
   }
   .請求不透明度{
    不透明度: 1 !重要;
   }
   
   .請求選択ボーダー2 {
    幅: calc(100% - 40px);
    左: 20px;
    高さ: 1px;
    位置: 絶対;
    上: 94px;
    背景色: #F2F2F2;
   }
 
  </スタイル>
 </head>
 <本文>
  
   <div class="billing_cent">
     <div class="請求セントデータフレックス">
      <div class="billing_select">
       <div class="billing_select_top">
        <div>請求書の内容を選択してください</div>
        <img src="img/icon36.png" alt="..." />
       </div>
       <div class="billing_select_center">
        <ul>
         <li class="billing_opacity">
          飲料
         <li>
          ドリンク
         <li>
          王老吉</li>
         <li>
          ラオ・バイガン
         <li>
          栄養エクスプレス
         <li>
          脈
        </ul>
        <div class="billing_select_border"></div>
        <div class="billing_select_border2"></div>
       </div>
       <div class="billing_select_bot">
        わかりました
      </div>
     </div>
    </div>
  
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   // スクロールイベントをリッスンする var scroll_index=0; // デフォルトのインデックス
       定数 $ScrollWrap = $(".billing_select_center>ul")
       // スクロール停止をリッスンします let t1 = 0;
       t2 = 0 とします。
       timer = null; // timer$ScrollWrap.on("touchstart", function() {
        // タッチ開始 ≈ スクロール開始})
       $ScrollWrap.on("スクロール", 関数() {
        //スクロール clearTimeout(timer)
        タイマー = setTimeout(isScrollEnd, 100)
        t1 = $ScrollWrap.scrollTop()
       })
   
       関数isScrollEnd() {
        t2 = $ScrollWrap.scrollTop();
        t2 == t1の場合{
         //スクロールが停止します clearTimeout(timer)
         // 各 li と上境界線の間の距離を取得します。var leng = $(".billing_select_center>ul>li").length;
         (var k = 0; k < 長さ; k++) の場合 {
          var top_leng = $(".billing_select_center>ul").children("li").eq(k).position().top;
          // 範囲が30から60の場合、選択される範囲は高さによって決まります if (top_leng >= 30 && top_leng <= 60) {
           スクロールインデックス=k;
           $("li").removeClass("billing_opacity");
           $(".billing_select_center>ul").children("li").eq(k).addClass("billing_opacity");
         // 対応する位置までスクロールし、各 li の高さは 47px です
         var scrool_heg = k * 47;
         $(".billing_select_center>ul").scrollTop(scrool_heg);
          }
         }
        }
       }
       
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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