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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0