휴대폰 슬라이딩 플러그인에 대한 간략한 분석 - iscroll.js
- 零到壹度원래의
- 2018-04-14 14:57:201866검색
이 글의 내용은 휴대폰 슬라이딩 플러그인-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.