原生js实现ios上下拖拽滑动日期选择器效果代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：原生js实现ios上下拖拽滑动日期选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

  
  
<style>
@charset "UTF-8";
body {
  font-family: Arial, "Hiragino Sans GB", 冬青黑, "Microsoft YaHei", 微软雅黑, SimSun, 宋体, Helvetica, Tahoma, "Arial sans-serif";
  background: #000;
}

.select-wrap {
  position: relative;
  height: 100%;
  text-align: center;
  overflow: hidden;
  font-size: 20px;
  color: #ddd;
}
.select-wrap:before, .select-wrap:after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 100%;
  height: 50%;
}
.select-wrap:before {
  top: 0;
  background-image: linear-gradient(to bottom, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0));
}
.select-wrap:after {
  bottom: 0;
  background-image: linear-gradient(to top, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0));
}
.select-wrap .select-options {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transform-style: preserve-3d;
  margin: 0 auto;
  display: block;
  transform: translateZ(-150px) rotateX(0deg);
  -webkit-font-smoothing: subpixel-antialiased;
  color: #666;
}
.select-wrap .select-options .select-option {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  -webkit-font-smoothing: subpixel-antialiased;
}
.select-wrap .select-options .select-option:nth-child(1) {
  transform: rotateX(0deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(2) {
  transform: rotateX(-18deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(3) {
  transform: rotateX(-36deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(4) {
  transform: rotateX(-54deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(5) {
  transform: rotateX(-72deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(6) {
  transform: rotateX(-90deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(7) {
  transform: rotateX(-108deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(8) {
  transform: rotateX(-126deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(9) {
  transform: rotateX(-144deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(10) {
  transform: rotateX(-162deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(11) {
  transform: rotateX(-180deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(12) {
  transform: rotateX(-198deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(13) {
  transform: rotateX(-216deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(14) {
  transform: rotateX(-234deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(15) {
  transform: rotateX(-252deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(16) {
  transform: rotateX(-270deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(17) {
  transform: rotateX(-288deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(18) {
  transform: rotateX(-306deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(19) {
  transform: rotateX(-324deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(20) {
  transform: rotateX(-342deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(21) {
  transform: rotateX(-360deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(22) {
  transform: rotateX(-378deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(23) {
  transform: rotateX(-396deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(24) {
  transform: rotateX(-414deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(25) {
  transform: rotateX(-432deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(26) {
  transform: rotateX(-450deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(27) {
  transform: rotateX(-468deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(28) {
  transform: rotateX(-486deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(29) {
  transform: rotateX(-504deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(30) {
  transform: rotateX(-522deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(31) {
  transform: rotateX(-540deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(32) {
  transform: rotateX(-558deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(33) {
  transform: rotateX(-576deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(34) {
  transform: rotateX(-594deg) translateZ(150px).........完整代码请登录后点击上方下载按钮下载查看