Une brève analyse du plug-in coulissant pour téléphone mobile

Une brève analyse du plug-in coulissant pour téléphone mobile—iscroll.js

零到壹度

Libérer： 2018-04-14 14:57:20

original

1864 Les gens l'ont consulté

Le contenu de cet article est de partager avec vous une brève analyse du plug-in coulissant pour téléphone portable-iscroll.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Pas de mots Dis en plus, va directement au code :

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

Copier après la connexion

Je ne sais pas comment le maître a fait, mais j'ai calculé la largeur comme ça –

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

Copier après la connexion

Exemple complet

<!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>

Copier après la connexion

Recommandations associées :

adresse du site officiel de gethub

Comparer l'API chinoise complète

Utilisation claire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!