jquery实现视频卡片拖拽更换效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：jquery实现视频卡片拖拽更换效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
@import url("https://fonts.googleapis.com/css?family=Questrial");
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 62.5%;
}

body {
  background: #eeeeee;
  overflow-x: hidden;
  font-family: "Questrial", "Helvetica Neue", Helvetica, sans-serif;
}

.elements {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35rem;
  height: 51rem;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0.5rem 1rem 3rem rgba(0, 0, 0, 0.7);
}

.container {
  position: relative;
  margin: 3rem auto 0;
  width: 32rem;
}

.slide {
  position: absolute;
  height: 31rem;
  width: 32rem;
  border-radius: 3px;
  cursor: -webkit-grab;
  cursor: grab;
  background-color: gray;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
}
.slide1 {
  box-shadow: 0.2rem 0.2rem 2.5rem rgba(0, 0, 0, 0.7);
  background-image: url("//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_640,h_360,/quality,q_90");
  background-size: 55rem;
}

#paris {
  margin-left: -15rem;
}

#italy, #prog {
  margin-left: 0rem;
}

#hongkong {
  margin-left: -10rem;
}

.index1 {
  z-index: 1;
}
.index2 {
  z-index: 2;
}
.index3 {
  z-index: 3;
}
.index4 {
  z-index: 4;
}

.description {
  position: absolute;
  top: 39rem;
  margin: auto 4.2rem;
  width: 26.6rem;
}
.description__line {
  position: absolute;
  top: 3.5rem;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
.description__country, .description__text {
  position: absolute;
  will-change: transform, opacity;
  transform: translateZ(0);
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.74, 0.05, 0.94, 0.36);
}
.description__country {
  width: 100%;
  font-size: 2rem;
  font-weight: 600;
}
.description__text {
  top: 5rem;
  font-size: 1.7rem;
  font-weight: 300;
  color: #aaaaaa;
  transition-delay: 0.03s;
}
.description__text.hide {
  transition-delay: 0.28s;
}

.fadeout-up {
  opacity: 0;
  transform: translate3D(0, -2rem, 0);
}

.hide {
  opacity: 0;
  transform: translate3D(0, 2rem, 0);
  transition: all 0.25s cubic-bezier(0.05, 0.67, 0.47, 0.99);
  transition-delay: 0.25s;
}

.fadein-up {
  opacity: 1;
  transform: translate3D(0, 0, 0);
}

svg {
  width: 3.5rem;
  height: 2.3rem;
  position: absolute;
  right: 0;
  top: -0.1rem;
}
</style>




</head>

<body>
  <div class="elements">
  <div class="container">
    <div class="slide slide1 index4">
      <video id="italy" height="310" autoplay="autoplay" muted="muted" loop="loop" poster="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_640,h_360,/quality,q_90">
        <source src="//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
      </video>
    </div>
    <div class="slide index3">
      <video id="paris" height="310" muted="muted" loop="loop" poster="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_640,h_360,/quality,q_90">
        <source src="//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
      </video>
    </div>
    <div class="slide index2">
      <video id="hongkong" height="310" muted="muted" loop="loop" poster="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_640,h_360,/quality,q_90">
        <source src="//repo.bfw.wiki/bfwrepo/video/5d87680ae1bf6.mp4" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
      </video>
    </div>
    <div class="slide index1">
      <video id="prog" height="310" muted="muted" loop="loop" poster="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_640,h_360,/quality,q_90">
        <source src="//repo.bfw.wiki/bfwrepo/video/5d8768414ae04.mp4" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
      </video>
    </div>
  </div>
  <div class="description">
    <div class="description__country"><span>La Crusc, Italy</span>
      <svg class="italy" viewbox="0 0 35 23">
        <rect width="12" height="23" fill="#3D9348"></rect>
        <rect x="23" width="12" height="23" fill="#D80031"></rect>
      </svg>
    </div>
    <div class="description__country hide"><span>Paris, France</span>
      <svg class="france" viewbox="0 0 35 23">
        <rect x="-0.1" width="12" height="23" fill="#323E95"></rect>
        <rect x="23" width="12" height="23" fill="#D80031"></rect>
      </svg>
    </div>
    <div class="description__country hide"><span>Hong Kong, China</span>
      <svg class="china" viewbox="0 0 35 23">
        <g>
          <rect width="35" height="23" fill="#CB1D23"></rect>
          <polygon points="4,8.9 4.7,6.6 2.8,5.2 5.2,5.2 5.9,2.9 6.7,5.2 9.1,5.2 7.1,6.6 7.8,8.9 5.9,7.5 	" fill="#F7DE29"></polygon>
          <polygon points="10.7,10.1 11.5,10.4 12,9.8 12,10.6 12.8,11 11.9,11.2 11.9,12 11.4,11.3 10.6,11.5 11.1,10.8 	" fill="#F7DE29"></polygon>
          <polygon points="15,5.7 14.2,5.6 13.8,6.3 13.6,5.5 12.8,5.3 13.6,4.9 13.4,4.1 14.1,4.7 14.8,4.3 14.4,5.1 	" fill="#F7DE29"></polygon>
          <polygon points="13.2,9.6 13.5,8.8 12.8,8.3 13.6,8.3 13.9,7.4 14.2,8.3 15.1,8.3 14.4,8.8 14.6,9.6 13.9,9.1 	" fill="#F7DE29"></polygon>
          <polygon points="10.7,2 11.5,2.4 12.1,1.8 12,2.6 12.8,3 11.9,3.2 11.8,4 11.4,3.3 10.5,3.4 11.1,2.8 	" fill="#F7DE29"></polygon>
        </g>
      </svg>
    </div>
    <div class="description__country hide"><span>Thx for watching</span>
      <svg class="china" viewbox="0 0 35 23"><a xlink:href="#">
          <path d="M31.3,2.7c-1,0.5-2.2,0.8-3.3,0.9c1.2-0.7,2.1-1.9,2.6-3.2c-1.1,0.7-2.4,1.1-3.7,1.4C25.8,0.7,24.3,0,22.6,0               c-3.2,0-5.8,2.6-5.8,5.8c0,0.5,0.1,0.9,0.1,1.3C12.1,6.9,7.8,4.6,5,1.1C4.5,1.9,4.2,2.9,4.2,4c0,2,1,3.8,2.6,4.8               c-1,0-1.8-0.3-2.6-0.7c0,0,0,0,0,0.1c0,2.8,2,5.2,4.7,5.7c-0.5,0.1-1,0.2-1.5,0.2c-0.4,0-0.7,0-1.1-0.1c0.7,2.3,2.9,4,5.4,4               c-2,1.6-4.5,2.5-7.2,2.5c-0.5,0-0.9,0-1.4-0.1C5.6,22,8.6,23,11.9,23c10.7,0,16.5-8.8,16.5-16.5c0-0.3,0-0.5,0-0.8               C29.5,4.9,30.5,3.9,31.3,2.7z" fill="#55ACEE"></path></a></svg>
    </div>
    <div class="description__line"></div>
    <div class="description__text"><span>How about you explore cultural events in La Crusc?</span></div>
    <div class="description__text hide"><span>How about you explore cultural events in Paris?</span></div>
    <div class="description__text hide"><span>How about you explore cultural events in Hong Kong?</span></div>
    <div class="description__text hide"><span>More demos soon =)</span></div>
  </div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script >
$(document).ready(function () {
  const $videos = [].slice.call(document.querySelectorAll('.slide'));
  const $countries = [].slice.call(document.querySelectorAll(".description__country"));
  const $texts = [].slice.call(document.querySelectorAll(".description__text"));

  var fromTo = (from, to, prgrs = 0) => from + (to - from) * prgrs;

  var easing = {
    inCubic: function (t, b, c, d) {// t: current time, b: begInnIng value, c: change In value, d: duration
      var ts = (t /= d) * t;
      var tc = ts * t;
      return b + c * (1.7 * tc * ts - 2.05 * ts * ts + 1.5 * tc - 0.2 * ts + 0.05 * t);
    } };


  var transforms = {
    translate3D: function (x = 0, y = 0, z = 0, el = "px") {
      return `translate3D(${x}${el}, ${y}${el}, ${z}${el})`;
    },

    rotate3d: function (x = 0, y = 0, z = 0, deg = 0) {
      return `rotate3d(${x}, ${y}, ${z}, ${deg}deg)`;
    },

    rotate: function (deg = 0) {
      return `rotate(${.........完整代码请登录后点击上方下载按钮下载查看