Eine kurze Analyse des Mobiltelefon-Sliding-Plug-Ins

Eine kurze Analyse des Mobiltelefon-Sliding-Plug-Ins – iscroll.js

零到壹度

Freigeben： 2018-04-14 14:57:20

Original

1863 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, Ihnen eine kurze Analyse des Mobiltelefon-Slide-Plug-ins-iscroll.js mitzuteilen. Es hat einen gewissen Referenzwert.

Keine Worte Sag mehr, gehe direkt zum Code:

//实例化滚动插件
    var myScroll = new IScroll(&#39;#wrapper&#39;, {scrollX: true, freeScroll: true});//实例化
     myScroll.scrollToElement(&#39;.active&#39;,true,true);//特定元素居中

Nach dem Login kopieren

Ich weiß nicht, wie der Meister das gemacht hat, aber ich habe die Breite so berechnet –

//计算需要滚动盒子的宽度
    var wrapper = $("#wrapper");
    wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());

Nach dem Login kopieren

Vollständiges Beispiel

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>HTML5 横向滚动</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
    <style>
        p{      
              width:80%; margin: 50px auto; border: 1px solid seagreen; overflow: hidden;        }
        ul{      
              margin: 0; padding: 0; list-style: none;    overflow: hidden;        }
        li{       
              padding: 15px 0; float: left; list-style: none;            
              width: 100px;margin: 10px; text-align: center; background: rosybrown        
         }        
         li.active{            background: red;        
         }

    </style></head><body><p class="wrapper"><ul>
    <li>第1个</li>
    <li>第2个</li>
    <li>第3个</li>
    <li>第4个</li>
    <li>第5个</li>
    <li class="active">第6个</li>
    <li>第7个</li></ul></p><script>
    var ele = $("ul");
    ele.width((ele.find("li").length + 1) * (ele.find("li").width()+20));    
    var myScroll = new IScroll(&#39;p&#39;, {scrollX: true, scrollY: false});
    myScroll.scrollToElement(&#39;.active&#39;,true,true);</script></body></html>

Nach dem Login kopieren

Verwandte Empfehlungen:

offizielle Gethub-Website-Adresse

Vollständige chinesische API vergleichen

Nutzung löschen

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Mobiltelefon-Sliding-Plug-Ins – iscroll.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!