add swiper

cnyet · Nov 30, 2018 · acf977b · acf977b
1 parent 3d09e51
commit acf977b
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 1 deletion.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,71 @@
+* {
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+img {
+  border: 0 none;
+  vertical-align: top;
+}
+
+i, em {
+  font-style: normal;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+input, select, button, h1, h2, h3, h4, h5, h6 {
+  font-size: 100%;
+  font-family: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+  color: #666;
+}
+
+body {
+  margin: 0 auto;
+  min-width: 320px;
+  max-width: 768px;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  font-family: -apple-system, Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  line-height: 1.5;
+  color: #666;
+  text-size-adjust: 100% !important;
+  user-select: none;
+}
+
+input[type="text"], textarea {
+  appearance: none;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * 状态类
+ */
+.hide {
+  display: none !important;
+}
diff --git a/css/swiper.min.css b/css/swiper.min.css
diff --git a/demos/手势滑屏/swiper.css b/demos/手势滑屏/swiper.css
@@ -0,0 +1,19 @@
+.container{
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+.wrapper{
+  overflow: auto;
+  transition: transform .2s;
+}
+.wrapper-item{
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  font-size: 18px;
+}
diff --git a/demos/手势滑屏/swiper.html b/demos/手势滑屏/swiper.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>滑屏效果</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="../../css/main.css">
+  <link rel="stylesheet" type="text/css" media="screen" href="swiper.css" />
+</head>
+<body>
+  <div class="container">
+    <div class="wrapper" id="swiper">
+      <div class="wrapper-item">swiper01</div>
+      <div class="wrapper-item">swiper02</div>
+      <div class="wrapper-item">swiper03</div>
+    </div>
+  </div>
+<script src="../../js/hammer.min.js"></script>
+<script src="swiper.js"></script>
+</body>
+</html>
diff --git a/demos/手势滑屏/swiper.js b/demos/手势滑屏/swiper.js
@@ -0,0 +1,35 @@
+var intervalTime = 200;
+var intervalDistance = 100;
+var currentIndex = 0;
+var drag = false;
+var pageY = 0;
+var distanceY = 0;
+var startTime = 0;
+
+var swiper = document.getElementById('swiper');
+swiper.addEventListener('touchstart', function(event){
+  drag = swiper;
+  pageY = event.touches[0].pageY;
+  startTime = new Date();
+  console.log('touchstart');
+});
+
+swiper.addEventListener('touchmove', function(event){
+  if (drag) {
+    distanceY = event.touches[0].pageY - pageY;
+  }
+});
+
+swiper.addEventListener('touchend', function(event){
+  var interval = new Date() - startTime;
+  var asbDistance = Math.abs(distanceY);
+  drag = false;
+  if (interval > intervalTime) {
+
+  }
+  if (distanceY > asbDistance) {
+    swiper.style.transform = '';
+  } 
+  console.log('touchend', interval);
+});
+
diff --git a/css/wave.css → demos/波浪效果/wave.css b/css/wave.css → demos/波浪效果/wave.css
diff --git a/波浪效果特效.html → demos/波浪效果/wave.html b/波浪效果特效.html → demos/波浪效果/wave.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>CSS3水波动画</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" type="text/css" media="screen" href="css/wave.css" />
+  <link rel="stylesheet" type="text/css" media="screen" href="wave.css" />
 </head>
 <body>
   <div id="container">

diff --git a/images/swiper1.jpg b/images/swiper1.jpg
diff --git a/images/swiper2.jpg b/images/swiper2.jpg
diff --git a/images/swiper3.jpg b/images/swiper3.jpg
diff --git a/js/hammer.min.js b/js/hammer.min.js
diff --git a/js/swiper.min.js b/js/swiper.min.js