js实现拖动分割看底片效果代码-html代码-BFW代码库

js实现拖动分割看底片效果代码

代码语言：html

所属分类：拖放

代码描述：js实现拖动分割看底片效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
body {
  background-color: #de5448;
  padding: 30px;
}

two-up {
  max-width: 400px;
}

.dark, .light {
  display: inline-block;
  font-size: 3em;
  font-weight: bold;
  background-color: #0e141b;
  color: #fff;
  height: 300px;
  max-width: 400px;
  line-height: 300px;
  text-align: center;
}

.light {
  background-color: #fff;
  color: #0e141b;
}
</style>


</head>

<body>
  <script >
      var TwoUp = (function () {
    'use strict';

    class Pointer {
        constructor(nativePointer) {
            /** Unique ID for this pointer */
            this.id = -1;
            this.nativePointer = nativePointer;
            this.pageX = nativePointer.pageX;
            this.pageY = nativePointer.pageY;
            this.clientX = nativePointer.clientX;
            this.clientY = nativePointer.clientY;
            if (self.Touch && nativePointer instanceof Touch) {
                this.id = nativePointer.identifier;
            }
            else if (isPointerEvent(nativePointer)) { // is PointerEvent
                this.id = nativePointer.pointerId;
            }
        }
        /**
         * Returns an expanded set of Pointers for high-resolution inputs.
         */
        getCoalesced() {
            if ('getCoalescedEvents' in this.nativePointer) {
                return this.nativePointer.getCoalescedEvents().map(p => new Pointer(p));
            }
            return [this];
        }
    }
    const isPointerEvent = (event) => self.PointerEvent && event instanceof PointerEvent;
    const noop = () => { };
    /**
     * Track pointers across a particular element
     */
    class PointerT.........完整代码请登录后点击上方下载按钮下载查看