티스토리 뷰

<script src="js/iscroll.js"></script>

<script type="text/javascript">

var myScroll;

function loaded() {

myScroll = new iScroll('smartScroll', {

snap: true, //스냅을 줄앨리먼트이다. 

momentum: false,

hScrollbar: false,

onScrollEnd: function () {

document.querySelector('#indicator > li.active').className = '';

document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';

}

});  

}

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<style type="text/css" media="all">
body,ul,li {
padding:10px;
margin:0;
}

body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}

#wrapper {
width:300px;
height:160px;

float:left;
position:relative; /* On older OS versions "position" and "z-index" must be defined, */
z-index:1; /* it seems that recent webkit is less picky and works anyway. */
overflow:hidden;

background:#aaa;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background:#e3e3e3;
}

#scroller {
width:2100px;
height:100%;
float:left;
padding:0;
}

#scroller ul {
list-style:none;
display:block;
float:left;
width:100%;
height:100%;
padding:0;
margin:0;
text-align:left;
}

#scroller li {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
display:block; float:left;
width:300px; height:160px;
text-align:center;
font-family:georgia;
font-size:18px;
line-height:140%;
}

#nav {
width:300px;
float:left;
}

#prev, #next {
float:left;
font-weight:bold;
font-size:14px;
padding:5px 0;
width:80px;
}

#next {
float:right;
text-align:right;
}

#indicator, #indicator > li {
display:block; float:left;
list-style:none;
padding:0; margin:0;
}

#indicator {
width:110px;
padding:12px 0 0 30px;
}

#indicator > li {
text-indent:-9999em;
width:8px; height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
background:#ddd;
overflow:hidden;
margin-right:4px;
}

#indicator > li.active {
background:#888;
}

#indicator > li:last-child {
margin:0;
}
</style>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
<li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
<li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
<li><strong>Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
<li><strong>Lyuben Dilov's Forth law:</strong> <em>A robot must establish its identity as a robot in all cases.</em></li>
<li><strong>Harry Harrison's Forth law:</strong> <em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em></li>
<li><strong>Nikola Kesarovski's Fifth law:</strong> <em>A robot must know it is a robot.</em></li>
</ul>
</div>
</div>
<div id="nav">
<div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
<ul id="indicator">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
</div>

아이스크롤을 이용하여~~ 모바일웹에서도 적용할수있는 carousel을 구현할 수 있다. 

그대로 가져다 쓰기는 참쉽고 편하다. 한가지 단점은 

iscroll이 적용된부분을 터치해서 상하로 움직일수가 없다는 점이다.


onBeforeScrollStart:null, 요속성을 사용하면 IOS계열에서는 가능해진다. 하지만 안드로이드 계열에서는 정상적인동작을 하지 않는다..

젤라빈까지는 테스트를 못해서 모르겠으나 현재 아이스크림샌드위치에서는 정상동작을 하지 않는다.. 갤럭시S2의 경우에 말이다.. 


혹시 이걸 해결하신분이 있으시다면 답글 좀 달아주세요~ ^^



출처 : http://cubiq.org/dropbox/iscroll4/examples/carousel/

저작자 표시 비영리 변경 금지
신고
댓글
댓글쓰기 폼
공지사항
Total
12,908
Today
3
Yesterday
5
«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함