|
|
@@ -0,0 +1,795 @@
|
|
|
+var ease = {
|
|
|
+ linear: function (e) {
|
|
|
+ return e;
|
|
|
+ },
|
|
|
+ easeInQuad: function (e) {
|
|
|
+ return e * e;
|
|
|
+ },
|
|
|
+ easeOutQuad: function (e) {
|
|
|
+ return e * (2 - e);
|
|
|
+ },
|
|
|
+ easeInOutQuad: function (e) {
|
|
|
+ return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
|
|
|
+ },
|
|
|
+ easeInCubic: function (e) {
|
|
|
+ return e * e * e;
|
|
|
+ },
|
|
|
+ easeOutCubic: function (e) {
|
|
|
+ return --e * e * e + 1;
|
|
|
+ },
|
|
|
+ easeInOutCubic: function (e) {
|
|
|
+ return e < 0.5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1;
|
|
|
+ },
|
|
|
+ easeInQuart: function (e) {
|
|
|
+ return e * e * e * e;
|
|
|
+ },
|
|
|
+ easeOutQuart: function (e) {
|
|
|
+ return 1 - --e * e * e * e;
|
|
|
+ },
|
|
|
+ easeInOutQuart: function (e) {
|
|
|
+ return e < 0.5 ? 8 * e * e * e * e : 1 - 8 * --e * e * e * e;
|
|
|
+ },
|
|
|
+ easeInQuint: function (e) {
|
|
|
+ return e * e * e * e * e;
|
|
|
+ },
|
|
|
+ easeOutQuint: function (e) {
|
|
|
+ return 1 + --e * e * e * e * e;
|
|
|
+ },
|
|
|
+ easeInOutQuint: function (e) {
|
|
|
+ return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e;
|
|
|
+ },
|
|
|
+ easeInOutCustom: function (e) {
|
|
|
+ return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e;
|
|
|
+ },
|
|
|
+};
|
|
|
+var NEWTON_ITERATIONS = 4,
|
|
|
+ NEWTON_MIN_SLOPE = 0.001,
|
|
|
+ SUBDIVISION_PRECISION = 1e-7,
|
|
|
+ SUBDIVISION_MAX_ITERATIONS = 10,
|
|
|
+ kSplineTableSize = 11,
|
|
|
+ kSampleStepSize = 1 / (kSplineTableSize - 1),
|
|
|
+ float32ArraySupported = "function" == typeof Float32Array,
|
|
|
+ easeInOut = new bezier(0.57, 0.09, 0.105, 1.005);
|
|
|
+function ads(e, t) {
|
|
|
+ (document.getElementById(t) || document.documentElement).classList.add(e);
|
|
|
+}
|
|
|
+function rds(e, t) {
|
|
|
+ (document.getElementById(t) || document.documentElement).classList.remove(e);
|
|
|
+}
|
|
|
+function event(e, t, r, n) {
|
|
|
+ // ga && ga('send', 'event', e, t, r, n);
|
|
|
+}
|
|
|
+function Vec2(e, t) {
|
|
|
+ this.x = e;
|
|
|
+ this.y = t;
|
|
|
+ this.lerp = function (e, t) {
|
|
|
+ (this.x += (e.x - this.x) * t), (this.y += (e.y - this.y) * t);
|
|
|
+ };
|
|
|
+ this.plus = function (e) {
|
|
|
+ return new Vec2(this.x + e.x, this.y + e.y);
|
|
|
+ };
|
|
|
+ this.minus = function (e) {
|
|
|
+ return new Vec2(this.x - e.x, this.y - e.y);
|
|
|
+ };
|
|
|
+ this.length = function () {
|
|
|
+ return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
|
|
|
+ };
|
|
|
+}
|
|
|
+function A(e, t) {
|
|
|
+ return 1 - 3 * t + 3 * e;
|
|
|
+}
|
|
|
+function B(e, t) {
|
|
|
+ return 3 * t - 6 * e;
|
|
|
+}
|
|
|
+function C(e) {
|
|
|
+ return 3 * e;
|
|
|
+}
|
|
|
+function calcBezier(e, t, r) {
|
|
|
+ return ((A(t, r) * e + B(t, r)) * e + C(t)) * e;
|
|
|
+}
|
|
|
+function getSlope(e, t, r) {
|
|
|
+ return 3 * A(t, r) * e * e + 2 * B(t, r) * e + C(t);
|
|
|
+}
|
|
|
+function binarySubdivide(e, t, r, n, o) {
|
|
|
+ for (var i, a, l = 0; 0 < (i = calcBezier((a = t + (r - t) / 2), n, o) - e) ? (r = a) : (t = a), Math.abs(i) > SUBDIVISION_PRECISION && ++l < SUBDIVISION_MAX_ITERATIONS; );
|
|
|
+ return a;
|
|
|
+}
|
|
|
+function newtonRaphsonIterate(e, t, r, n) {
|
|
|
+ for (var o = 0; o < NEWTON_ITERATIONS; ++o) {
|
|
|
+ var i = getSlope(t, r, n);
|
|
|
+ if (0 === i) return t;
|
|
|
+ t -= (calcBezier(t, r, n) - e) / i;
|
|
|
+ }
|
|
|
+ return t;
|
|
|
+}
|
|
|
+function LinearEasing(e) {
|
|
|
+ return e;
|
|
|
+}
|
|
|
+
|
|
|
+function bezier(a, t, l, r) {
|
|
|
+ if (!(0 <= a && a <= 1 && 0 <= l && l <= 1)) throw new Error("bezier x values must be in [0, 1] range");
|
|
|
+ if (a === t && l === r) return LinearEasing;
|
|
|
+ for (var s = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize), e = 0; e < kSplineTableSize; ++e) s[e] = calcBezier(e * kSampleStepSize, a, l);
|
|
|
+ return function (e) {
|
|
|
+ return 0 === e
|
|
|
+ ? 0
|
|
|
+ : 1 === e
|
|
|
+ ? 1
|
|
|
+ : calcBezier(
|
|
|
+ (function (e) {
|
|
|
+ for (var t = 0, r = 1, n = kSplineTableSize - 1; r !== n && s[r] <= e; ++r) t += kSampleStepSize;
|
|
|
+ var o = t + ((e - s[--r]) / (s[r + 1] - s[r])) * kSampleStepSize,
|
|
|
+ i = getSlope(o, a, l);
|
|
|
+ return NEWTON_MIN_SLOPE <= i ? newtonRaphsonIterate(e, o, a, l) : 0 === i ? o : binarySubdivide(e, t, t + kSampleStepSize, a, l);
|
|
|
+ })(e),
|
|
|
+ t,
|
|
|
+ r
|
|
|
+ );
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+var animUtil = {
|
|
|
+ queue: [],
|
|
|
+ i: 0,
|
|
|
+ init: function () {
|
|
|
+ browserController.addToRenderLoop(animUtil.render);
|
|
|
+ },
|
|
|
+ runAnimation: function (e, t, r, n) {
|
|
|
+ var o = {
|
|
|
+ callback: e,
|
|
|
+ duration: t,
|
|
|
+ easing: r,
|
|
|
+ then: n,
|
|
|
+ t: 0,
|
|
|
+ p: 0,
|
|
|
+ end: function () {
|
|
|
+ animUtil.finish(this);
|
|
|
+ },
|
|
|
+ finished: !1,
|
|
|
+ };
|
|
|
+ return animUtil.queue.push(o), o;
|
|
|
+ },
|
|
|
+ render: function () {
|
|
|
+ for (animUtil.i = 0; animUtil.i < animUtil.queue.length; animUtil.i++) animUtil.run(animUtil.queue[animUtil.i]);
|
|
|
+ },
|
|
|
+ run: function (e) {
|
|
|
+ (e.t += browserController.state.delta), (e.p = Math.min(1, e.t / e.duration)), e.callback(e.easing ? e.easing(e.p) : e.p), 1 <= e.p && animUtil.finish(e);
|
|
|
+ },
|
|
|
+ finish: function (e) {
|
|
|
+ e.then && e.then(), (e.finished = !0), animUtil.queue.splice(animUtil.queue.indexOf(e), 1), animUtil.i--;
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+/**导航控制器 已整理完毕*/
|
|
|
+var navigationController = {
|
|
|
+ startSite: function () {
|
|
|
+ let ti = setTimeout(function () {
|
|
|
+ clearTimeout(ti);
|
|
|
+ ads("show-grid");
|
|
|
+ // if (isFirstLoad) {
|
|
|
+ // setTimeout(function () {
|
|
|
+ // ads("show-intro");
|
|
|
+ // }, 10);
|
|
|
+ // }
|
|
|
+ }, 400);
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+/**浏览器控制器 已整理完毕*/
|
|
|
+var browserController = {
|
|
|
+ state: {
|
|
|
+ scrollTop: 0,
|
|
|
+ toRender: [],
|
|
|
+ toResize: [],
|
|
|
+ resizeTimeout: null,
|
|
|
+ mouse: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ xLag: 0,
|
|
|
+ yLag: 0,
|
|
|
+ lag: 3,
|
|
|
+ xLagSlow: 0,
|
|
|
+ yLagSlow: 0,
|
|
|
+ slowLag: 20,
|
|
|
+ down: !1,
|
|
|
+ },
|
|
|
+ dpi: window.devicePixelRatio || 1,
|
|
|
+ t: 0,
|
|
|
+ d: Date.now(),
|
|
|
+ delta: 0,
|
|
|
+ rem: 0,
|
|
|
+ isMobile: window.innerWidth < 800,
|
|
|
+ isPortrait: window.innerHeight > window.innerWidth,
|
|
|
+ },
|
|
|
+ initialize: function () {
|
|
|
+ window.addEventListener("resize", browserController.onResize);
|
|
|
+ browserController.renderLoop();
|
|
|
+ },
|
|
|
+ addToRenderLoop: function (e) {
|
|
|
+ browserController.state.toRender.push(e);
|
|
|
+ browserController.state.toRender.push(() => {});
|
|
|
+ },
|
|
|
+ addToResizeLoop: function (e) {
|
|
|
+ browserController.state.toResize.push(e);
|
|
|
+ },
|
|
|
+ renderBaseWork: function () {
|
|
|
+ browserController.state.delta = Date.now() - browserController.state.d;
|
|
|
+ browserController.state.t += browserController.state.delta;
|
|
|
+ browserController.state.d = Date.now();
|
|
|
+ browserController.state.mouse.xLag += (browserController.state.mouse.x - browserController.state.mouse.xLag) / browserController.state.mouse.lag;
|
|
|
+ browserController.state.mouse.yLag += (browserController.state.mouse.y - browserController.state.mouse.yLag) / browserController.state.mouse.lag;
|
|
|
+ browserController.state.mouse.xLagSlow += (browserController.state.mouse.x - browserController.state.mouse.xLagSlow) / browserController.state.mouse.slowLag;
|
|
|
+ browserController.state.mouse.yLagSlow += (browserController.state.mouse.y - browserController.state.mouse.yLagSlow) / browserController.state.mouse.slowLag;
|
|
|
+ },
|
|
|
+ renderLoop: function () {
|
|
|
+ browserController.renderBaseWork();
|
|
|
+ browserController.state.toRender.forEach(function (e) {
|
|
|
+ e();
|
|
|
+ });
|
|
|
+ requestAnimationFrame(browserController.renderLoop);
|
|
|
+ },
|
|
|
+
|
|
|
+ onResize: function () {
|
|
|
+ clearTimeout(browserController.state.resizeTimeout), (browserController.state.resizeTimeout = setTimeout(browserController.resizeLoop, 100));
|
|
|
+ },
|
|
|
+
|
|
|
+ resizeLoop: function () {
|
|
|
+ browserController.state.toResize.forEach(function (e) {
|
|
|
+ e();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+/**拖拽工具 已整理完毕*/
|
|
|
+var dragUtil = {
|
|
|
+ state: {
|
|
|
+ draggableElements: [],
|
|
|
+ },
|
|
|
+ init: function () {
|
|
|
+ browserController.addToRenderLoop(dragUtil.render);
|
|
|
+ window.addEventListener("mouseout", function (e) {
|
|
|
+ var t = (e = e || window.event).relatedTarget || e.toElement;
|
|
|
+ (t && "HTML" != t.nodeName) || dragUtil.endAllDrags();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ registerDraggableElement: function (e, t) {
|
|
|
+ var r = {
|
|
|
+ el: e,
|
|
|
+ callback: t,
|
|
|
+ dragging: !1,
|
|
|
+ startPos: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ currentPos: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ diff: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ thisDiff: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ endDrag: function () {
|
|
|
+ this.dragging = !1;
|
|
|
+ },
|
|
|
+ getDist: function () {
|
|
|
+ return Math.sqrt(Math.pow(this.diff.x, 2) + Math.pow(this.diff.y, 2));
|
|
|
+ },
|
|
|
+ };
|
|
|
+ e.addEventListener("mousedown", dragUtil.onDragStart.bind(dragUtil, r)),
|
|
|
+ e.addEventListener("mousemove", dragUtil.onDragMove.bind(dragUtil, r)),
|
|
|
+ e.addEventListener("mouseup", dragUtil.onDragEnd.bind(dragUtil, r)),
|
|
|
+ // e.addEventListener('mouseover', dragUtil.onMouseOver.bind(dragUtil, r)),
|
|
|
+ // e.addEventListener('mouseout', dragUtil.onMouseOut.bind(dragUtil, r)),
|
|
|
+ e.addEventListener("touchstart", dragUtil.onDragStart.bind(dragUtil, r)),
|
|
|
+ e.addEventListener("touchmove", dragUtil.onDragMove.bind(dragUtil, r)),
|
|
|
+ e.addEventListener("touchend", dragUtil.onDragEnd.bind(dragUtil, r)),
|
|
|
+ dragUtil.state.draggableElements.push(r);
|
|
|
+ },
|
|
|
+ normalizeEvent: function (e) {
|
|
|
+ return e.touches && 0 < e.touches.length ? ((e.clientX = e.touches[0].clientX), (e.clientY = e.touches[0].clientY)) : e.clientX || ((e.clientX = 0), (e.clientY = 0)), e;
|
|
|
+ },
|
|
|
+ onDragStart: function (e, t) {
|
|
|
+ e.dragging = !0;
|
|
|
+ t = dragUtil.normalizeEvent(t);
|
|
|
+ e.startPos.x = e.currentPos.x = t.clientX;
|
|
|
+ e.startPos.y = e.currentPos.y = t.clientY;
|
|
|
+ e.diff.x = 0;
|
|
|
+ e.diff.y = 0;
|
|
|
+ e.thisDiff.x = 0;
|
|
|
+ e.thisDiff.y = 0;
|
|
|
+ gridController.state.isHandleDrag = !1;
|
|
|
+ },
|
|
|
+ onDragMove: function (e, t) {
|
|
|
+ if (e.dragging) {
|
|
|
+ t = dragUtil.normalizeEvent(t);
|
|
|
+ e.currentPos.x = t.clientX;
|
|
|
+ e.currentPos.y = t.clientY;
|
|
|
+ var r = e.currentPos.x - e.startPos.x;
|
|
|
+ var n = e.currentPos.y - e.startPos.y;
|
|
|
+ e.thisDiff.x = r - e.diff.x;
|
|
|
+ e.thisDiff.y = n - e.diff.y;
|
|
|
+ e.diff.x = r;
|
|
|
+ e.diff.y = n;
|
|
|
+ // gridController.state.isHandleDrag = !1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onMouseOver: function (e, t) {
|
|
|
+ t = dragUtil.normalizeEvent(t);
|
|
|
+ e.startPos.x = e.currentPos.x = t.clientX;
|
|
|
+ e.startPos.y = e.currentPos.y = t.clientY;
|
|
|
+ e.diff.x = 0;
|
|
|
+ e.diff.y = 0;
|
|
|
+ e.thisDiff.x = 0;
|
|
|
+ e.thisDiff.y = 0;
|
|
|
+ e.endDrag();
|
|
|
+ e.callback(e);
|
|
|
+ },
|
|
|
+ onMouseOut: function (e, t) {},
|
|
|
+ onDragEnd: function (e) {
|
|
|
+ e.dragging && (e.endDrag(), e.callback(e), (gridController.state.isHandleDrag = !0));
|
|
|
+ },
|
|
|
+ endAllDrags: function () {
|
|
|
+ dragUtil.state.draggableElements.forEach(function (e) {
|
|
|
+ dragUtil.onDragEnd(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearDraggableElements: function () {
|
|
|
+ dragUtil.state.draggableElements = [];
|
|
|
+ },
|
|
|
+ render: function () {
|
|
|
+ dragUtil.state.draggableElements.forEach(function (e) {
|
|
|
+ e.dragging && e.callback(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+/**网格控制器 */
|
|
|
+var gridController = {
|
|
|
+ state: {
|
|
|
+ items: [], //所有框
|
|
|
+ showItems: {}, //在屏幕内的框
|
|
|
+ imageAspect: Math.sqrt(3) / 2, //图像纵横比 原始0.65
|
|
|
+ screenAspect: window.innerWidth / window.innerHeight, //屏幕纵横比
|
|
|
+ gridEl: null,
|
|
|
+ rows: 0,
|
|
|
+ cols: 0,
|
|
|
+ colWidth: 0,
|
|
|
+ rowHeight: 0,
|
|
|
+ itemSpace: 0, //间距
|
|
|
+ itemWidth: 217 * (!window.isMobile ? 1 : 0.6),
|
|
|
+ itemHeight: 251 * (!window.isMobile ? 1 : 0.6),
|
|
|
+ flipWidth: 0,
|
|
|
+ flipHeight: 0,
|
|
|
+ target: new Vec2(1e8, 1e8),
|
|
|
+ offset: new Vec2(1e8, 1e8),
|
|
|
+ initTarget: new Vec2(1e8, 1e8),
|
|
|
+ focus: null,
|
|
|
+ selected: null,
|
|
|
+ count: 32,
|
|
|
+ lerpRate: 1,
|
|
|
+ canDrag: !0,
|
|
|
+ template: null,
|
|
|
+ flipped: !1,
|
|
|
+ canIncrement: !0,
|
|
|
+ cardArray: null,
|
|
|
+ needsCreate: !1,
|
|
|
+ canSelect: 1,
|
|
|
+ isHandleDrag: !0,
|
|
|
+ isClick: false,
|
|
|
+ },
|
|
|
+ /**初始 */
|
|
|
+ init: function (e) {
|
|
|
+ gridController.state.grid = document.getElementById("grid");
|
|
|
+ dragUtil.registerDraggableElement(gridController.state.grid, gridController.handleDrag);
|
|
|
+ gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2);
|
|
|
+ gridController.state.cardArray = e;
|
|
|
+ gridController.create();
|
|
|
+ browserController.addToRenderLoop(this.render);
|
|
|
+ browserController.addToResizeLoop(this.handleResize);
|
|
|
+ gridController.getgif(5);
|
|
|
+ },
|
|
|
+ //部分图片转为gif图
|
|
|
+ getgif: function (seconds) {
|
|
|
+ const tt = setTimeout(() => {
|
|
|
+ clearTimeout(tt);
|
|
|
+ $(".grid__itemPicture.hasurl").each(function () {
|
|
|
+ const gif = $(this).attr("gif");
|
|
|
+ const newSrc = `https://vr.njmuseum.com/img/ww/${gif}`;
|
|
|
+ $(this).find("img").attr("src", newSrc);
|
|
|
+ });
|
|
|
+ }, seconds * 1000);
|
|
|
+ },
|
|
|
+ /**场景调整大小 */
|
|
|
+ handleResize: function () {
|
|
|
+ gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2);
|
|
|
+ gridController.create();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**创建网格 */
|
|
|
+ create: function (boo = true) {
|
|
|
+ var e = gridController.state.cardArray;
|
|
|
+ //横屏/竖屏
|
|
|
+ if (window.innerWidth > window.innerHeight) {
|
|
|
+ let b = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75));
|
|
|
+ n = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1;
|
|
|
+ let c = Math.ceil(e.length / n);
|
|
|
+ o = c > b ? c : b;
|
|
|
+ o = o % 2 == 0 ? o : o + 1;
|
|
|
+ } else {
|
|
|
+ let a = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1;
|
|
|
+ o = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75));
|
|
|
+ o = o % 2 == 0 ? o : o + 1;
|
|
|
+ let c = Math.ceil(e.length / o);
|
|
|
+ n = c > a ? c : a;
|
|
|
+ }
|
|
|
+
|
|
|
+ gridController.state.rows = o;
|
|
|
+ gridController.state.cols = n;
|
|
|
+ gridController.state.colWidth = gridController.state.itemWidth;
|
|
|
+ gridController.state.rowHeight = gridController.state.itemHeight;
|
|
|
+ gridController.state.flipWidth = gridController.state.colWidth * n;
|
|
|
+ gridController.state.flipHeight = gridController.state.rowHeight * o * 0.75;
|
|
|
+ gridController.state.count = o * n;
|
|
|
+ gridController.state.grid.innerHTML = "";
|
|
|
+ gridController.state.showItems = {};
|
|
|
+ gridController.state.items = [];
|
|
|
+ gridController.state.target = new Vec2(1e8, 1e8);
|
|
|
+ gridController.state.offset = new Vec2(1e8, 1e8);
|
|
|
+ // debugger;
|
|
|
+ for (var l = 0, s = 0; s < n; s++) {
|
|
|
+ for (var d = 0; d < o; d++) {
|
|
|
+ this.createItem(d, s, l);
|
|
|
+ l++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let keys = Object.keys(gridController.state.showItems);
|
|
|
+ if (keys.length >= e.length) {
|
|
|
+ gridController.state.canDrag = 0;
|
|
|
+ let showArr = [];
|
|
|
+ if (e.length < 10) {
|
|
|
+ // 排序逻辑
|
|
|
+ const sortedArray = Object.values(gridController.state.showItems).sort((a, b) => a.interval - b.interval || b.intervalX - a.intervalX);
|
|
|
+ // const sortedArray = [
|
|
|
+ // ...Object.values(gridController.state.showItems),
|
|
|
+ // ].sort(
|
|
|
+ // (a, b) => a.intervalY - b.intervalY || a.intervalX - b.intervalX
|
|
|
+ // );
|
|
|
+ showArr = new Array(keys.length).fill(0);
|
|
|
+ for (let i = 0; i < e.length; i++) {
|
|
|
+ let obj = sortedArray[i];
|
|
|
+ let inx = keys.indexOf(obj.index + "");
|
|
|
+ showArr[inx] = e[i];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let arr1 = new Array(keys.length).fill(0);
|
|
|
+ showArr = gridController.replaceRandomly(arr1, e);
|
|
|
+ }
|
|
|
+ let nint = 0;
|
|
|
+ gridController.state.items.forEach((n, inx) => {
|
|
|
+ gridController.state.grid.append(n.el);
|
|
|
+ if (keys.indexOf(n.index + "") != -1) {
|
|
|
+ if (showArr[nint] != 0) {
|
|
|
+ n.card.className = "grid__itemCard";
|
|
|
+ n.el.id = showArr[nint] + "_" + n.index;
|
|
|
+ n.el.style.zIndex = Math.floor(Math.random() * 9999);
|
|
|
+ n.image = gridController.createImage(showArr[nint], "grid__itemPicture");
|
|
|
+ n.card.append(n.image);
|
|
|
+ }
|
|
|
+ nint++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let arr1 = new Array(gridController.state.items.length).fill(0);
|
|
|
+ let showArr = gridController.replaceRandomly(arr1, e);
|
|
|
+ gridController.state.items.forEach((n, inx) => {
|
|
|
+ gridController.state.grid.append(n.el);
|
|
|
+ let ids = showArr[inx] != 0 ? showArr[inx] : e[Math.floor(Math.random() * e.length)];
|
|
|
+ n.card.className = "grid__itemCard";
|
|
|
+ n.el.id = ids + "_" + n.index;
|
|
|
+ n.el.style.zIndex = Math.floor(Math.random() * 9999);
|
|
|
+ n.image = gridController.createImage(ids, "grid__itemPicture");
|
|
|
+ n.card.append(n.image);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ replaceRandomly: function (arr1, arr2) {
|
|
|
+ const result = [...arr1];
|
|
|
+ const availableIndices = result.map((_, index) => index);
|
|
|
+ for (const value of arr2) {
|
|
|
+ if (availableIndices.length === 0) break;
|
|
|
+ const randomIndex = Math.floor(Math.random() * availableIndices.length);
|
|
|
+ const targetIndex = availableIndices[randomIndex];
|
|
|
+ result[targetIndex] = value;
|
|
|
+ availableIndices.splice(randomIndex, 1);
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**创建网格单独对象 */
|
|
|
+ createItem: function (e, t, r) {
|
|
|
+ var n = {
|
|
|
+ row: e,
|
|
|
+ col: t,
|
|
|
+ el: document.createElement("div"),
|
|
|
+ offset: new Vec2(0, 0),
|
|
|
+ pos: new Vec2(0, 0),
|
|
|
+ target: new Vec2(0, 0),
|
|
|
+ interval: 0,
|
|
|
+ intervalX: 0,
|
|
|
+ intervalY: 0,
|
|
|
+ zDistance: 0,
|
|
|
+ zTarget: 0,
|
|
|
+ zRate: 0.1,
|
|
|
+ angle: 0,
|
|
|
+ angleTarget: 0,
|
|
|
+ index: r,
|
|
|
+ order: 0,
|
|
|
+ uid: "",
|
|
|
+ card: document.createElement("div"),
|
|
|
+ back: document.createElement("div"),
|
|
|
+ image: "",
|
|
|
+ close: document.createElement("div"),
|
|
|
+ anim: null,
|
|
|
+ };
|
|
|
+ n.el.className = "grid__item";
|
|
|
+ n.el.id = n.index;
|
|
|
+ n.card.className = "grid__itemCard showBack";
|
|
|
+ n.back.className = "grid__itemBack";
|
|
|
+ n.card.append(n.back);
|
|
|
+ n.el.append(n.card);
|
|
|
+ n.el.style.height = gridController.state.itemHeight + "px";
|
|
|
+ n.el.style.width = gridController.state.itemWidth + "px";
|
|
|
+ n.el.addEventListener("mousedown", gridController.setFocus.bind(n));
|
|
|
+ n.el.addEventListener("touchstart", gridController.setFocus.bind(n));
|
|
|
+ n.offset.x = t * (gridController.state.itemWidth + gridController.state.itemSpace) + (parseInt(e % 2) == 0 ? 0 : gridController.state.itemWidth / 2);
|
|
|
+ n.offset.y = e * gridController.state.itemHeight * 0.75;
|
|
|
+ let xx = ((n.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth;
|
|
|
+ let yy = ((n.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight;
|
|
|
+ gridController.state.items.push(n);
|
|
|
+
|
|
|
+ if (!window.isMobile) {
|
|
|
+ if (xx >= gridController.state.itemWidth * 0.5 && xx < window.innerWidth - gridController.state.itemWidth * 1.5 && yy > 0 && yy < window.innerHeight - gridController.state.itemHeight * 0.75) {
|
|
|
+ n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5);
|
|
|
+ n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5);
|
|
|
+ n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.5);
|
|
|
+ gridController.state.showItems[n.index] = n;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // let w = $('.logo').width();
|
|
|
+ // let h = $('.logo').height();
|
|
|
+ // let ww = $('.select .option').width();
|
|
|
+ // let hh = $('.select .option').height();
|
|
|
+ // console.log(w, h, ww, hh, xx, yy, n.index);
|
|
|
+
|
|
|
+ // console.log(gridController.state.target);
|
|
|
+ //手机版
|
|
|
+ if (
|
|
|
+ // !(xx >= 0 && xx <= w && yy >= 0 && yy <= h) &&
|
|
|
+ // !(xx >= ww && xx <= window.innerWidth && yy >= hh && yy <= h) &&
|
|
|
+ xx >= 0 &&
|
|
|
+ xx < window.innerWidth - gridController.state.itemWidth * 0.5 &&
|
|
|
+ yy >= -10 &&
|
|
|
+ yy < window.innerHeight - gridController.state.itemHeight * 0.75
|
|
|
+ ) {
|
|
|
+ n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5);
|
|
|
+ n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5);
|
|
|
+ n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.75);
|
|
|
+ gridController.state.showItems[n.index] = n;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**计算网格到页面中心点的距离 */
|
|
|
+ calculateDistance: function (pointX, pointY) {
|
|
|
+ const dx = pointX - window.innerWidth * 0.5;
|
|
|
+ const dy = pointY - window.innerHeight * 0.5;
|
|
|
+ return Math.floor(Math.sqrt(dx * dx + dy * dy) * 100) / 100;
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteItem: function (newArr) {
|
|
|
+ gridController.state.items.forEach((e, t) => {
|
|
|
+ gridController.state.grid.removeChild(e.el);
|
|
|
+ });
|
|
|
+ gridController.state.items = [];
|
|
|
+ gridController.state.cardArray = newArr;
|
|
|
+ gridController.create(false);
|
|
|
+ gridController.positionCardsInCenter();
|
|
|
+ var temptime = setTimeout(() => {
|
|
|
+ gridController.deselectItem();
|
|
|
+ clearTimeout(temptime);
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**创建网格单独对象图 */
|
|
|
+ createImage: function (e, t) {
|
|
|
+ let gifArr = [
|
|
|
+ "hbts04",
|
|
|
+ "10：12156",
|
|
|
+ "0：5268",
|
|
|
+ // '2：6587',
|
|
|
+ // '0：8178',
|
|
|
+ // '2：823',
|
|
|
+ // '2：6923',
|
|
|
+ "10：23225",
|
|
|
+ "10：8069",
|
|
|
+ "10：2259",
|
|
|
+ "3：2106",
|
|
|
+ "10：26104",
|
|
|
+ "10：19001",
|
|
|
+ "3：7550",
|
|
|
+ "111111",
|
|
|
+ "10：28529",
|
|
|
+ ];
|
|
|
+
|
|
|
+ var html = `<div class="${t} ${!lxs[e].url && gifArr.indexOf(e) != -1 ? "hasurl" : ""}" gif="${gifArr.indexOf(e) != -1 ? e + ".gif" : ""}">
|
|
|
+ <img src="${`https://houseoss.4dkankan.com/project/hubeiMuseum/wwq/modelImg/${e}.png`}" />
|
|
|
+ <div class="shadow">
|
|
|
+ <div class="name">
|
|
|
+ <i>${getName(lxs[e].name).dynasty}</i>
|
|
|
+ <h3>${getName(lxs[e].name).name}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="iconbox">
|
|
|
+ <div class="threed" ></div>
|
|
|
+ </div>
|
|
|
+ <div class="coverbox">
|
|
|
+ <div class="right" onclick="openDetail('${e}',event)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>`;
|
|
|
+
|
|
|
+ // 创建一个临时容器
|
|
|
+ var container = document.createElement("div");
|
|
|
+ container.innerHTML = html;
|
|
|
+
|
|
|
+ // 返回生成的 DOM 元素
|
|
|
+ return container.firstElementChild;
|
|
|
+ },
|
|
|
+
|
|
|
+ //拖拽
|
|
|
+ handleDrag: function (e) {
|
|
|
+ if (gridController.state.canDrag) {
|
|
|
+ var t = browserController.state.isMobile ? 2 : 1;
|
|
|
+ gridController.state.target.x += e.thisDiff.x * t;
|
|
|
+ gridController.state.target.y += e.thisDiff.y * t;
|
|
|
+ }
|
|
|
+ 0 == e.dragging &&
|
|
|
+ (e.getDist() < 10 && gridController.state.focus && (!gridController.state.selected && gridController.state.canSelect ? gridController.selectItem(gridController.state.focus) : gridController.deselectItem(), (gridController.state.canSelect = !0)), (gridController.state.focus = null));
|
|
|
+ },
|
|
|
+ //设置焦点
|
|
|
+ setFocus: function () {
|
|
|
+ gridController.state.focus = this;
|
|
|
+ },
|
|
|
+ // 选择某一个进详情页
|
|
|
+ selectItem: function (e) {
|
|
|
+ if ($("body").hasClass("wapbody") && !gridController.state.isClick && !$(e.el).hasClass("active")) {
|
|
|
+ gridController.state.isClick = true;
|
|
|
+ $(".grid__item").removeClass("active later");
|
|
|
+ $(e.el).addClass("active");
|
|
|
+ let ti = setTimeout(function () {
|
|
|
+ clearTimeout(ti);
|
|
|
+ $(e.el).addClass("later");
|
|
|
+ gridController.state.isClick = false;
|
|
|
+ }, 400);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ moveToCenterAnim: function (e) {
|
|
|
+ this.item.target.x = this.item.pos.x = this.start.x + this.move.x * e;
|
|
|
+ this.item.target.y = this.item.pos.y = this.start.y + this.move.y * e;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**卡片中心位置 */
|
|
|
+ positionCardsInCenter: function () {
|
|
|
+ gridController.state.items.forEach(function (e, t) {
|
|
|
+ var r = e.el.getBoundingClientRect(),
|
|
|
+ n = new Vec2(gridController.state.screenCenter.x - r.width / 2, gridController.state.screenCenter.y - r.height / 2);
|
|
|
+ e.target.x = e.pos.x = n.x;
|
|
|
+ e.target.y = e.pos.y = n.y;
|
|
|
+ gridController.drawItem(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭详情页
|
|
|
+ deselectItem: function () {
|
|
|
+ gridController.state.selected = null;
|
|
|
+ gridController.state.lerpRate = 0.19;
|
|
|
+ setTimeout(function () {
|
|
|
+ let keys = Object.keys(gridController.state.showItems);
|
|
|
+ gridController.state.canDrag = gridController.state.cardArray.length > keys.length;
|
|
|
+ gridController.state.lerpRate = 1;
|
|
|
+ isSwitchingOver = true;
|
|
|
+ }, 500);
|
|
|
+ gridController.state.needsCreate && (gridController.create(), (gridController.state.needsCreate = !1));
|
|
|
+ },
|
|
|
+
|
|
|
+ setOrder: function (e) {
|
|
|
+ e.order = gridController.getOrder(e);
|
|
|
+ },
|
|
|
+
|
|
|
+ getOrder: function (e) {
|
|
|
+ return gridController.state.count - ((e.index - gridController.state.selected.index + gridController.state.count) % gridController.state.count);
|
|
|
+ },
|
|
|
+
|
|
|
+ render: function () {
|
|
|
+ if (gridController.state.canDrag && gridController.state.isHandleDrag && !document.documentElement.classList.contains("show-intro") && $(".fp-completely").index() === 1) {
|
|
|
+ // 文物自动移动
|
|
|
+ gridController.state.target.x += 0.3;
|
|
|
+ }
|
|
|
+ gridController.state.offset.lerp(gridController.state.target, 0.1);
|
|
|
+ gridController.state.items.forEach(gridController.updateItem);
|
|
|
+ gridController.state.items.forEach(gridController.drawItem);
|
|
|
+ },
|
|
|
+
|
|
|
+ updateItem: function (e) {
|
|
|
+ var t = gridController.state.selected == e;
|
|
|
+ if (gridController.state.selected) {
|
|
|
+ var r = gridController.state.flipped ? 10 : 6;
|
|
|
+ e.zTarget = 2 * e.order - gridController.state.count + (t ? r : 0);
|
|
|
+ } else {
|
|
|
+ e.target.x = ((e.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth;
|
|
|
+ e.target.y = ((e.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight;
|
|
|
+ }
|
|
|
+ e.pos.lerp(e.target, gridController.state.lerpRate);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**坐标更新 */
|
|
|
+ drawItem: function (e) {
|
|
|
+ var t;
|
|
|
+ if (browserController.state.isMobile) {
|
|
|
+ t = window.innerWidth / 40;
|
|
|
+ } else {
|
|
|
+ t = 1.5 * Math.min(12, Math.max(0, window.innerHeight - 550) / 40 + 4);
|
|
|
+ }
|
|
|
+ e.el.style.transform = "translate3d(" + e.pos.x + "px, " + e.pos.y + "px, " + e.zDistance * t + "px)";
|
|
|
+ },
|
|
|
+
|
|
|
+ updateInit: function (newArr) {
|
|
|
+ if (isSwitchingOver) {
|
|
|
+ isSwitchingOver = false;
|
|
|
+ let allNum = 0;
|
|
|
+ gridController.state.selected = gridController.state.items[0];
|
|
|
+ gridController.state.items.forEach((e, t) => {
|
|
|
+ var r = new Vec2(e.pos.x, e.pos.y),
|
|
|
+ n = e.el.getBoundingClientRect(),
|
|
|
+ o = new Vec2(n.left + n.width / 2, n.top + n.height / 2),
|
|
|
+ i = gridController.state.screenCenter.minus(o);
|
|
|
+ e.centerPos = gridController.state.screenCenter.minus(new Vec2(n.width / 2, n.height / 2));
|
|
|
+ gridController.setOrder(e);
|
|
|
+ gridController.state.lerpRate = 1;
|
|
|
+ var a = e.index * 10 + Math.ceil(300 * Math.random()) + 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ animUtil.runAnimation(
|
|
|
+ gridController.moveToCenterAnim.bind({
|
|
|
+ start: r,
|
|
|
+ item: e,
|
|
|
+ move: i,
|
|
|
+ }),
|
|
|
+ 600,
|
|
|
+ easeInOut,
|
|
|
+ () => {
|
|
|
+ allNum++;
|
|
|
+ if (allNum >= gridController.state.items.length) {
|
|
|
+ gridController.deleteItem(newArr);
|
|
|
+ gridController.state.target = new Vec2(1e8, 1e8);
|
|
|
+ gridController.state.offset = new Vec2(1e8, 1e8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }, 0);
|
|
|
+ });
|
|
|
+ gridController.getgif(3);
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+function gridinit() {
|
|
|
+ browserController.initialize();
|
|
|
+ animUtil.init();
|
|
|
+ dragUtil.init();
|
|
|
+}
|
lanxin
il y a 1 semaine
