网站排队队列怎么做,电脑公司网站模板,简单网页制作成品代码,html5手机网站源码下载1. 前言 不知道各位前端小伙伴蓝湖使用的多不多#xff0c;反正我是经常在用#xff0c;ui将原型图设计好后上传至蓝湖#xff0c;前端开发人员就可以开始静态页面的的编写了。对于页面细节看的不是很清楚可以使用滚轮缩放后再拖拽查看#xff0c;还是很方便的。于是就花了…1. 前言 不知道各位前端小伙伴蓝湖使用的多不多反正我是经常在用ui将原型图设计好后上传至蓝湖前端开发人员就可以开始静态页面的的编写了。对于页面细节看的不是很清楚可以使用滚轮缩放后再拖拽查看还是很方便的。于是就花了点时间研究了一下。今天分享给大家。
2. 实现
HTML div classimgBoximg stylewidth: 150px; height: 150px; padding: 10px src../../../images/HTTP工作原理.jpg classimg-responsive /img stylewidth: 150px; height: 150px; padding: 10px src../../../images/HTTP报文结构.jpg classimg-responsive //divdiv idouterdiv styleposition: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.7);z-index: 2;width: 100%;height: 100%;display: none;img idbigimg src //div
js
拖拽查看图片逻辑
function imgDrag() {// 绑定 鼠标按下事件image.addEventListener(pointerdown, pointerdown);// 绑定 鼠标移动事件image.addEventListener(pointermove, pointermove);image.addEventListener(pointerup, function (e) {if (isPointerdown) {isPointerdown false;}});image.addEventListener(pointercancel, function (e) {if (isPointerdown) {isPointerdown false;}});}function pointerdown(e) {isPointerdown true;console.log(e.pointerId)// 说明Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标直到捕获被释放。可以理解为在窗口不是全屏情况下我在拖动放大图片时即使鼠标移出可窗口之外此时事件还是捕获在该放大图片上。image.setPointerCapture(e.pointerId);lastPointermove {x: e.clientX,y: e.clientY,};}function pointermove(e) {if (isPointerdown) {const current1 {x: e.clientX,y: e.clientY,};diff.x current1.x - lastPointermove.x;diff.y current1.y - lastPointermove.y;lastPointermove {x: current1.x,y: current1.y,};x diff.x;y diff.y;image.style.transform translate3d(${x}px, ${y}px, 0) scale(${initScale});}e.preventDefault();}
滚轮缩放逻辑
function handleStopWheel(e) {let itemSizeChange 1.1; //每一次滚动放大的倍数if (e.target.id bigimg) {// 说明e.dataY如果大于0则表示鼠标向下滚动反之则向上滚动这里设计为向上滚动为缩小向下滚动为放大if (e.deltaY 0) {itemSizeChange 1 / 1.1;}let _initScale initScale * itemSizeChange;// 说明在超过或低于临界值时虽然让initScale等于maxZoom或minreduce但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce而是跳过。if (_initScale maxZoom) {initScale maxZoom;} else if (_initScale minreduce) {initScale minreduce;} else {initScale _initScale;}const origin {x: (itemSizeChange - 1) * imgWidth * 0.5,y: (itemSizeChange - 1) * imgHeight * 0.5,};// 计算偏移量if (_initScale maxZoom _initScale minreduce) {x - (itemSizeChange - 1) * (e.clientX - x) - origin.x;y - (itemSizeChange - 1) * (e.clientY - y) - origin.y;e.target.style.transform translate3d(${x}px, ${y}px, 0) scale(${initScale});}}// 阻止默认事件e.preventDefault();}
js全部代码
script/*** 实现图片点击放大、拖拽、滚轴滚动焦点缩放功能相关参数、函数声明*/let imgWidth, imgHeight; // 图片点击放大初始尺寸参数let maxZoom 4; //最大缩放倍数let minreduce 0.5; // 最小缩放倍数let initScale 1; //滚动缩放初始倍数并不是图片点击放大的倍数let isPointerdown false; //鼠标按下的标识//记录鼠标按下坐标和按下移动时坐标let lastPointermove {x: 0,y: 0,};//移动过程从上一个坐标到下一个坐标之间的差值let diff {x: 0,y: 0,};//图片放大后左上角的坐标主要结合diff参数用于鼠标焦点缩放时图片偏移坐标let x 0;let y 0;// 记录节点const allImg document.querySelectorAll(.imgBox img);const outerdiv document.querySelector(#outerdiv);const image outerdiv.querySelector(#bigimg);window.onload function () {allImg.forEach((item) {item.addEventListener(click, (e) {const that e.target;image.style.transform scale(1);//图片放大展示函数调用imgShow(that);// 监听鼠标滚动事件window.addEventListener(wheel, handleStopWheel, {passive: false,});// 拖转事件调用imgDrag();});});};function imgShow(that) {let src that.getAttribute(src);image.setAttribute(src, src);// 设置尺寸和调整比例let windowW document.documentElement.clientWidth;let windowH document.documentElement.clientHeight;let realWidth image.naturalWidth; //获取图片的原始宽度let realHeight image.naturalHeight; //获取图片的原始高度let outsideScale 0.8;let belowScale 1.4;let realRatio realWidth / realHeight;let windowRatio windowW / windowH;// 说明下面是我自己的一些判断逻辑大致意思就是图片的真实尺寸大于屏幕尺寸则使用屏幕尺寸如果小于屏幕尺寸就使用自己本身的尺寸并根据大于或者小于的比例对图片的尺寸进一步调整。coder可以根据自己的要求进行修改。if (realRatio windowRatio) {if (realWidth windowW) {imgWidth windowH * outsideScale;imgHeight (imgWidth / realWidth) * realHeight;} else {if (realWidth * belowScale windowW) {imgWidth realWidth * (belowScale - 0.2);imgHeight (imgWidth / realWidth) * realHeight;} else {imgWidth realWidth;imgHeight realHeight;}}} else {if (realHeight windowH) {imgHeight windowH * outsideScale;imgWidth (imgHeight / realHeight) * realWidth;} else {if (realHeight * belowScale windowW) {imgHeight realHeight * (belowScale - 0.2);imgWidth (imgHeight / realHeight) * realWidth;} else {imgWidth realWidth;imgHeight realHeight;}}}//设置放大图片的尺寸、偏移量并展示image.style.width imgWidth px;image.style.height imgHeight px;x (windowW - imgWidth) * 0.5;y (windowH - imgHeight) * 0.5;image.style.transform translate3d(${x}px, ${y}px, 0);outerdiv.style.display block;// 点击蒙版及外面区域放大图片关闭outerdiv.onclick () {outerdiv.style.display none;initScale 1;window.removeEventListener(wheel, handleStopWheel);};// 阻止事件冒泡image.onclick (e) {e.stopPropagation();};}function handleStopWheel(e) {let itemSizeChange 1.1; //每一次滚动放大的倍数if (e.target.id bigimg) {// 说明e.dataY如果大于0则表示鼠标向下滚动反之则向上滚动这里设计为向上滚动为缩小向下滚动为放大if (e.deltaY 0) {itemSizeChange 1 / 1.1;}let _initScale initScale * itemSizeChange;// 说明在超过或低于临界值时虽然让initScale等于maxZoom或minreduce但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce而是跳过。if (_initScale maxZoom) {initScale maxZoom;} else if (_initScale minreduce) {initScale minreduce;} else {initScale _initScale;}const origin {x: (itemSizeChange - 1) * imgWidth * 0.5,y: (itemSizeChange - 1) * imgHeight * 0.5,};// 计算偏移量if (_initScale maxZoom _initScale minreduce) {x - (itemSizeChange - 1) * (e.clientX - x) - origin.x;y - (itemSizeChange - 1) * (e.clientY - y) - origin.y;e.target.style.transform translate3d(${x}px, ${y}px, 0) scale(${initScale});}}// 阻止默认事件e.preventDefault();}function imgDrag() {// 绑定 鼠标按下事件image.addEventListener(pointerdown, pointerdown);// 绑定 鼠标移动事件image.addEventListener(pointermove, pointermove);image.addEventListener(pointerup, function (e) {if (isPointerdown) {isPointerdown false;}});image.addEventListener(pointercancel, function (e) {if (isPointerdown) {isPointerdown false;}});}function pointerdown(e) {isPointerdown true;console.log(e.pointerId)// 说明Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标直到捕获被释放。可以理解为在窗口不是全屏情况下我在拖动放大图片时即使鼠标移出可窗口之外此时事件还是捕获在该放大图片上。image.setPointerCapture(e.pointerId);lastPointermove {x: e.clientX,y: e.clientY,};}function pointermove(e) {if (isPointerdown) {const current1 {x: e.clientX,y: e.clientY,};diff.x current1.x - lastPointermove.x;diff.y current1.y - lastPointermove.y;lastPointermove {x: current1.x,y: current1.y,};x diff.x;y diff.y;image.style.transform translate3d(${x}px, ${y}px, 0) scale(${initScale});}e.preventDefault();}/script
