jQuery simuliert einen Picker, um einen gleitenden Auswahleffekt zu erzielen

In diesem Artikel wird der spezifische Code von jQuery zur Simulation des Pickers zur Erzielung des gleitenden Auswahleffekts zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1,Minimalmaßstab=1,Maximalmaßstab=1,Benutzerskalierbar=nein" />
  <Titel></Titel>
  <style type="text/css">
   html,Text{
    Breite: 100 %;
    Höhe: 100%;
   }
   div{
    Box-Größe: Rahmenbox;
   }
   .biegen{
    Anzeige: Flex;
   }
   .billing_cent {
    Breite: 100 %; Höhe: 100 %;
    Position: fest;
    links: 0;
    oben: 0;
    Z-Index: 10;
    Hintergrundfarbe: #000000;
   }
   .billing_cent_data {
    Breite: 100 %;
    Höhe: 100%;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
   }
   
   .Abrechnungsauswahl {
    Breite: 230px;
    Höhe: 257px;
    Hintergrund: #FFFFFF;
    Position: relativ;
    Rahmenradius: 3px;
   }
   
   .billing_select_top>div {
    Textausrichtung: zentriert;
    Schriftgröße: 16px;
    Farbe: #333333;
    Polsterung: 20px 0;
   }
   
   .billing_select_top>img {
    Breite: 7px;
    Höhe: 13px;
    Position: absolut;
    rechts: 10px;
    oben: 10px;
    z-Index: 3; Cursor: Zeiger;
   }
   
   .Abrechnungsauswahlcenter {
    Breite: 100 %;
    Höhe: 141px;
    Polsterung: 0 20px;
    Überlauf: versteckt;
    Position: relativ;
   }
   
   .billing_select_bot {
    Breite: 100 %;
    Textausrichtung: zentriert;
    Höhe: 45px;
    Zeilenhöhe: 45px;
    Hintergrund: #EEEEEE;
    Textausrichtung: zentriert;
    Position: absolut;
    links: 0;
    unten: 0;
    Z-Index: 3;
    Rahmenradius: 3px;
   }
   
   .billing_select_center>ul {
    Rand: 0 automatisch;
    Anzeige: Block;
    Box-Größe: Rahmenbox;
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: automatisch;
    Polsterung: 47px 0;
    Position: absolut;
    links: 0;
    oben: 0;
    Z-Index: 3;
   }
   
   .billing_select_center>ul>li {
    Breite: 100 %;
    Höhe: 47px;
    Zeilenhöhe: 47px;
    Schriftgröße: 15px;
    Farbe: #333333;
    Textausrichtung: zentriert;
    Deckkraft: .5;
   }
   
   .Abrechnungsauswahlborder {
    Breite: berechnet (100 % – 40 Pixel);
    links: 20px;
    Höhe: 1px;
    Position: absolut;
    oben: 47px;
    Hintergrundfarbe: #F2F2F2;
   }
   .billing_opacity{
    Deckkraft: 1 !wichtig;
   }
   
   .billing_select_border2 {
    Breite: berechnet (100 % – 40 Pixel);
    links: 20px;
    Höhe: 1px;
    Position: absolut;
    oben: 94px;
    Hintergrundfarbe: #F2F2F2;
   }
 
  </Stil>
 </Kopf>
 <Text>
  
   <div Klasse="Abrechnungscent">
     <div Klasse="billing_cent_data flex">
      <div Klasse="Abrechnungsauswahl">
       <div Klasse="Abrechnung_Auswahl_oben">
        <div>Bitte wählen Sie den Rechnungsinhalt aus</div>
        <img src="img/icon36.png" alt="..." />
       </div>
       <div Klasse="Abrechnungsauswahlcenter">
        <ul>
         <li Klasse="Abrechnungsopacity">
          Getränke
         <li>
          Getränke
         <li>
          Wang Laoji</li>
         <li>
          Lao Baigan
         <li>
          Nutrition Express
         <li>
          Impuls
        </ul>
        <div Klasse="billing_select_border"></div>
        <div Klasse="billing_select_border2"></div>
       </div>
       <div Klasse="Abrechnungsauswahlbot">
        OK
      </div>
     </div>
    </div>
  
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <Skripttyp="text/javascript">
   // Auf Scroll-Ereignisse warten var scroll_index=0; //Standardindex
       const $ScrollWrap = $(".billing_select_center>ul")
       // Auf Scroll-Stopp warten let t1 = 0;
       sei t2 = 0;
       let timer = null; // timer$ScrollWrap.on("touchstart", function() {
        //Berühren Sie Start ≈ Scrollen Sie Start})
       $ScrollWrap.on("scrollen", Funktion() {
        //Scrollen Sie mit „clearTimeout (Timer)“
        Timer = setzeTimeout(isScrollEnd, 100)
        t1 = $ScrollWrap.scrollTop()
       })
   
       Funktion istScrollEnd() {
        t2 = $ScrollWrap.scrollTop();
        wenn (t2 == t1) {
         //Scrollen stoppt clearTimeout(timer)
         // Ermitteln Sie den Abstand zwischen jedem li und der oberen Grenze. var leng = $(".billing_select_center>ul>li").length;
         für (var k = 0; k < Länge; k++) {
          var top_leng = $(".billing_select_center>ul").children("li").eq(k).position().top;
          // Wenn der Bereich zwischen 30 und 60 liegt, wird der ausgewählte Bereich durch die Höhe bestimmt, wenn (top_leng >= 30 && top_leng <= 60) {
           Bildlaufindex=k;
           $("li").removeClass("billing_opacity");
           $(".billing_select_center>ul").children("li").eq(k).addClass("billing_opacity");
         // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
         var scrool_heg = k * 47;
         $(".billing_select_center>ul").scrollTop(scrool_heg);
          }
         }
        }
       }
       
  </Skript>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Beispielcode für die verschiebbare Städteauswahl für Pinyin-Buchstaben auf einem mobilen Touchscreen von jQuery
Realisieren Sie den Kaufdatumauswahleffekt basierend auf der jQuery-Schiebeleiste
JQuery implementiert das Plug-In „Elastischer Schieberegler für die Auswahl von Werten“
jQuery implementiert die Methode zum Ziehen der Maus zum Auswählen von Zahlen

<<: Detaillierte Erklärung der Linux-Befehle und der Dateisuche

>>: Die Rolle der neuen Feature-Window-Funktionen von MySQL 8