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 PointerTracker {
        /**
         * Track pointers across a particular element
         *
         * @param element Element to monitor.
         * @param callbacks
         */
        constructor(_element, callbacks) {
            this._element = _element;
            /**
             * State of the tracked pointers when they were pressed/touched.
             */
            this.startPointers = [];
            /**
             * Latest state of the tracked pointers. Contains the same number
             * of pointers, and in the same order as this.startPointers.
             */
            this.currentPointers = [];
            const { start = () => true, move = noop, end = noop, } = callbacks;
            this._startCallback = start;
            this._moveCallback = move;
            this._endCallback = end;
            // Bind methods
            this._pointerStart = this._pointerStart.bind(this);
            this._touchStart = this._touchStart.bind(this);
            this._move = this._move.bind(this);
            this._triggerPointerEnd = this._triggerPointerEnd.bind(this);
            this._pointerEnd = this._pointerEnd.bind(this);
            this._touchEnd = this._touchEnd.bind(this);
            // Add listeners.........完整代码请登录后点击上方下载按钮下载查看