ホームページ >ウェブフロントエンド >jsチュートリアル >携帯電話のスライド プラグインの簡単な分析 — iscroll.js
携帯電話のスライド プラグインの簡単な分析 — iscroll.js
- 零到壹度オリジナル
- 2018-04-14 14:57:201858ブラウズ
この記事の内容は、携帯電話のスライディング プラグイン-iscroll.js の簡単な分析を共有することです。必要な友人はそれを参照できます
あまり言うことはありません。コードに移動します:
//实例化滚动插件
var myScroll = new IScroll('#wrapper', {scrollX: true, freeScroll: true});//实例化
myScroll.scrollToElement('.active',true,true);//特定元素居中 マスターがどのようにしたかはわかりませんが、次のように幅を計算しました –
//计算需要滚动盒子的宽度
var wrapper = $("#wrapper");
wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());完全な例
<!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('p', {scrollX: true, scrollY: false});
myScroll.scrollToElement('.active',true,true);</script></body></html>関連する推奨事項:
以上が携帯電話のスライド プラグインの簡単な分析 — iscroll.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。