js实现拖动排列整齐的数字卡片选择动画效果代码-html代码-BFW代码库

js实现拖动排列整齐的数字卡片选择动画效果代码

代码语言：html

所属分类：拖放

代码描述：js实现拖动排列整齐的数字卡片选择动画效果代码，一排卡片排列成s型，你这样拖拽，卡片就会依次位移滚动。

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

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

<head>
  <meta charset="UTF-8">
  

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Staatliches&amp;display=swap'>
  
<style>
body {
  position: relative;
  height: 100%;
  background-color: black;
}

#debug {
  width: 40px;
  height: 32px;
  background: white;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  font-size: 18px;
  font-family: monospace;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 400px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}
.fan .blade {
  position: absolute;
  left: 0;
  top: 0;
  width: 44.8px;
  height: 35px;
  background: green;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
  font-family: "Staatliches", cursive;
}
</style>


  
  
</head>

<body >
  <div id="fan" class="fan"></div>
<div id="debug"></div>









  
      <script  >
/**
 * Config
 */
const range = [1, 40]; // must be [low, high] and is in steps of 1


/** --- RAF --------------------------*/
window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
}();


/** --- Setup --------------------------*/
const normalize = (va, mi, ma) => (va - mi) / (ma - mi),
interpolate = (no, mi, ma) => mi + (ma - mi) * no,
map = (va, mi1, ma1, mi2, ma2) => interpolate(normalize(va, mi1, ma1), mi2, ma2),
debug = document.getElementById('debug'),
fan = document.getElementById('fan'),
diff = range[1] - range[0],
rem = 1 + diff,
STATUS_IDLE = 0, // idle
STATUS_DRAG = 1, // dragging
STATUS_RELE = 7, // released
STATUS_FADE = 9; // smooth stop


/** --- Vars --------------------------*/
let prevDragTime = 0,
prevTickTime = 0,
prevY = 0,
speedY = 0,
currentNorm = range[0],
currentVal = range[0],
blades = [],
fTimeout,
status = STATUS_IDLE;


/** --- Interaction start handler --------------------------*/
const touchstart = e => {
  if (status === STATUS_DRAG) return;
  status = STATUS_DRAG;
  clearTimeout(fTimeout);
  prevTime = Date.now();
  prevY = e.type == 'touchstart' ? e.touches[0].clientY : e.clientY;
};


/** --- Interaction move handler --------------------------*/
const touchmove = e => {
  if (status !== STATUS_DRAG) return;

  e.preventDefault();

  const cY = e.type == 'touchmove' ? e.touches[0].clientY : e.clientY,
  deltaY = cY - prevY,
  deltaTime = Date.now() - prevDragTime;

  speedY = -deltaY / (deltaTime + 1) * 20;

  prevDragTime = Date.now();
  prevY = cY;
};


/** --- Interactio.........完整代码请登录后点击上方下载按钮下载查看