suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Analyse des Mobiltelefon-Sliding-Plug-Ins – iscroll.js

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

零到壹度
零到壹度Original
2018-04-14 14:57:201917Durchsuche

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('#wrapper', {scrollX: true, freeScroll: true});//实例化
     myScroll.scrollToElement('.active',true,true);//特定元素居中

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());

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>

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!

JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So extrahieren Sie öffentliche Funktionen aus dem Applet in util.jsNächster Artikel：So extrahieren Sie öffentliche Funktionen aus dem Applet in util.js

In Verbindung stehende Artikel

Mehr sehen