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