flipsnap.js를 사용하여 스마트폰의 스치기 조작 실현
6612 단어 초학자flipsnap.js
개시하다
스마트폰 사이트에서 흔히 볼 수 있는 스치기 조작
flipsnap.js 플러그인을 다운로드하고 실행합니다.
공식 사이트
flipsnap.js의 특징
브라우저 지원
Mobile
iOS Safari (iOS4+)
Android Browser (Android 2.1+)
Android Firefox Mobile 9.0+
Android Opera Mobile 11.50+
Window8 IE10+
PC
IE9+
Google Chrome
Opera
Firefox
Safari
다운로드
공식 사이트에서 플러그인을 다운로드하다.
이루어지다
사전 준비
Jquery 및 빈 html 파일과 CSS 파일이 준비되어 있습니다.
공식 견본에 근거하여 제작하다.
HTML 만들기
flick.html
<html>
<head>
<meta charaset="UTF-8" />
<title>フリック機能を試してみよう！</title>
<link rel="stylesheet" type="text/css" href="flipsnap.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="flipsnap.min.js"></script>
<script>
$(function(){
Flipsnap('.flipsnap');
})
</script>
</head>
<body>
<div class="viewport">
<div class="flipsnap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
</html>
CSS 만들기
flipsnap.css
.viewport {
width: 320px;
overflow: hidden;
margin: 0 auto;
-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}
.flipsnap {
width: 960px; /* 320px(item width) * 3(item count) */
}
.flipsnap:after {
content: '';
display: block;
clear: both;
height: 0;
}
.item {
float: left;
width: 310px;
font-size: 50px;
text-align: center;
padding: 50px 0;
background: #EFEFEF;
border: 5px solid #999;
color: #666;
}
동작 확인
이해하기 어렵습니다.스쳐지나면1→2에서미끄러져 나타납니다.
총결산
다른 다양한 플리츠도 쉽게 가능합니다!
관심 있는 사람은 데모를 참고하여 다양한 방법을 시도할 수 있다.
Reference
이 문제에 관하여(flipsnap.js를 사용하여 스마트폰의 스치기 조작 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryuji_i3/items/29ced14dc509ca521fd8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
공식 사이트에서 플러그인을 다운로드하다.
이루어지다
사전 준비
Jquery 및 빈 html 파일과 CSS 파일이 준비되어 있습니다.
공식 견본에 근거하여 제작하다.
HTML 만들기
flick.html
<html>
<head>
<meta charaset="UTF-8" />
<title>フリック機能を試してみよう！</title>
<link rel="stylesheet" type="text/css" href="flipsnap.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="flipsnap.min.js"></script>
<script>
$(function(){
Flipsnap('.flipsnap');
})
</script>
</head>
<body>
<div class="viewport">
<div class="flipsnap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
</html>
CSS 만들기
flipsnap.css
.viewport {
width: 320px;
overflow: hidden;
margin: 0 auto;
-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}
.flipsnap {
width: 960px; /* 320px(item width) * 3(item count) */
}
.flipsnap:after {
content: '';
display: block;
clear: both;
height: 0;
}
.item {
float: left;
width: 310px;
font-size: 50px;
text-align: center;
padding: 50px 0;
background: #EFEFEF;
border: 5px solid #999;
color: #666;
}
동작 확인
이해하기 어렵습니다.스쳐지나면1→2에서미끄러져 나타납니다.
총결산
다른 다양한 플리츠도 쉽게 가능합니다!
관심 있는 사람은 데모를 참고하여 다양한 방법을 시도할 수 있다.
Reference
이 문제에 관하여(flipsnap.js를 사용하여 스마트폰의 스치기 조작 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryuji_i3/items/29ced14dc509ca521fd8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<meta charaset="UTF-8" />
<title>フリック機能を試してみよう！</title>
<link rel="stylesheet" type="text/css" href="flipsnap.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="flipsnap.min.js"></script>
<script>
$(function(){
Flipsnap('.flipsnap');
})
</script>
</head>
<body>
<div class="viewport">
<div class="flipsnap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
</html>
.viewport {
width: 320px;
overflow: hidden;
margin: 0 auto;
-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}
.flipsnap {
width: 960px; /* 320px(item width) * 3(item count) */
}
.flipsnap:after {
content: '';
display: block;
clear: both;
height: 0;
}
.item {
float: left;
width: 310px;
font-size: 50px;
text-align: center;
padding: 50px 0;
background: #EFEFEF;
border: 5px solid #999;
color: #666;
}
이해하기 어렵습니다.스쳐지나면1→2에서미끄러져 나타납니다.
총결산
다른 다양한 플리츠도 쉽게 가능합니다!
관심 있는 사람은 데모를 참고하여 다양한 방법을 시도할 수 있다.
Reference
이 문제에 관하여(flipsnap.js를 사용하여 스마트폰의 스치기 조작 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryuji_i3/items/29ced14dc509ca521fd8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(flipsnap.js를 사용하여 스마트폰의 스치기 조작 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryuji_i3/items/29ced14dc509ca521fd8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
