首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生 JS 手写一个优雅图片预览功能,带你吃透背后原理

最终效果如下:图片图片缩放(PC)在PC实现图片缩放相对是比较简单,我们利用滚轮事件监听并改变 scale 值即可。...指针 是输入设备硬件层抽象(比如鼠标,触摸笔,或触摸屏上一个触摸点),它能指向一个具体表面(屏幕)上一个(或一组)坐标,可以表示包括接触点位置,引发事件设备类型,接触表面受到压力等。...PointerEvent 接口继承了所有 MouseEvent 属性,以保障原有为鼠标事件所开发内容能更加有效迁移到指针事件。...虽然浏览器滚动对应其实是 scroll 事件,但我们在PC上滚动通常都是用利用滚轮(笔记本触控板也被视作滚轮),所以在滚轮事件阻止系统默认事件也就阻止了滚动,但不是完全阻止,因为滚动条没隐藏的话还是可以拖动来滚动页面的...注意滚轮事件(wheel)是可以触发冒泡捕获,而滚动事件(scroll)却无法触发冒泡,了解更多可以看我之前一篇文章:哪些浏览器事件不会冒泡。至于移动端又是为什么阻止了滚动呢?

2.4K81

实现pc端鼠标滚轮缩放图片步骤

之前写一个图片预览插件时候,遇到了鼠标滚轮滚动进行图片缩放需求,现在来回顾一下。...思路 首先整理一下思路,要想实现这一需求都需要哪几部,首先我们肯定要阻止鼠标的默认事件,其次,给图片设置一个默认倍数,然后根据我们鼠标缩放去调整这个倍数,OK,接下来就开干。...方法阻止默认事件,并写入我们自定义事件。...获取鼠标滚动方向 阻止鼠标滚动默认事件之后,我们就要开始进入正题了。获取鼠标滚动数据进行图片缩放,其实主要就是获取鼠标滚动方向,向上滚动就放大,向下滚动就缩小。...据搜索得知,事件参数,代表鼠标滚轮滚动方向参数为e.wheelDelta,我们可以打印一下 scrollFunc(e) { // ...

2.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

学习滚动插件iScroll简单使用

iScroll介绍 iScroll是一个高性能,资源占用少,无依赖,跨平台javascript上拉加载,下拉刷新滚动插件,目前版本v5.2.0。...它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要是滚动(特别是在移动平台) iScroll 精简版 是又小又快解决方案(这个能应付大多数场景)。...'); 配置参数说明 var myScroll = new IScroll('#wrapper', { mouseWheel: true, //是否监听鼠标滚轮事件...next() prev()上一,下一结合 options.snap使用缩放zoom(scale, x, y, time)缩放容器Scale: 缩放因子刷新refresh()刷新 IScroll销毁destroy...滚动scrollEnd滚动结束flick轻击屏幕左、右zoomStart开始缩放zoomEnd缩放结束 iScroll 可以处理用户进行移动交互元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能

2.8K30

jimojianghu

现在使用这段代码,已经彻底无效,要想解决问题,得想新方案。 话不多说,下面先给出具体解决办法。 触控板 要禁止触控板缩放行为,需要处理鼠标滚轮事件:wheel 。...此外,对 document 处理了滚轮事件后,因为该事件会传播冒泡,所以需要注意页面上其他子元素——如果有滚动条之类,需要在子元素上阻止冒泡,不然后滚动会失效。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 但需要注意滚轮默认事件会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。...添加 passive 参数为true后,touchmove 事件不会阻塞页面的滚动(同样适用于鼠标滚轮事件)。...由于目标被视为被动,因此无法在被动事件侦听器阻止默认行为。 可能发生情景:移动端使用touch事件后,垂直平移时报错。

3.7K00

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布绘制背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

+ 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 绘制超大图片 ( 使用鼠标拖动查看图 | 设置 JFrame 窗口自动关闭...| 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器...MouseWheelListener ) 博客 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动效果也随之缩放, 缩小画布后 , 移动鼠标 , 移动距离对应缩放效果也随之缩小...; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布绘制背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener | Canvas 绘制图像并设置图像大小...) 博客 , 使用缩放背景图像方式 , 实现缩放效果 , 并同时福袋鼠标指针拖拽效果 ; 本博客实现案例 , 在上面的基础上 , 添加了鼠标滚轮缩放中心点设置为当前鼠标中心点 ; 1、代码示例

1.8K20

【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小...Canvas 画布 - 要点分析 ---- 1、鼠标滚轮事件 设置一个缩放比例 scale , 默认为 1.0 ; private double scale = 1.0; // 缩放比例,默认为...1.0 设置鼠标滚轮监听 , 在 Canvas 组件 , 调用 addMouseWheelListener 函数 , 添加 鼠标滚轮监听器 MouseWheelListener , 实现该监听器...// 绘制图形 } } 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 ---- 在 【Java AWT 图形界面编程】Canvas 绘制超大图片 ( 使用鼠标拖动查看图...| 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客 , 绘制了超大图像 , 可以使用鼠标拖动 , 这里在上述基础上 , 新增鼠标滚轮缩放示例 ;

2.2K30

ArcGIS JS API 4.16控制地图缩放大小

在3.XArcGIS JS API版本我们可以轻松调用相应API来实现地图缩放大小控制,让实例化后地图在我们设置范围中进行缩放,但是在4.X版本并没有相应属性来控制,所以我们采用一种折中方式来实现...问题描述 在WebGIS项目开发过程,有时候我们数据服务在某些级别下是没有数据,比如一个切片服务,仅仅切了5-12级,所以当我们将地图缩放到0-4级或者12级往后的话,会看不到我们切片图层。...evt) { evt.stopPropagation(); }); view.on('mouse-wheel', function (evt) { //鼠标滚轮缩小...{ console.info(view.scale); console.info(evt); } }); }); 其实在4版本我们是通过监听地图鼠标滚动事件来实现...,在鼠标滚动时候去阻止事件执行。

4.6K10

C++ Qt开发:Charts折线图绑定事件

接着,我们继续增加一个折线图动态预览功能,通过使用该功能可以对特定区域进行选择放大缩小,读者可通过键盘案件进行缩放也可通过鼠标滚轮和左右键选中缩放,该功能在图形预览也是最常见。...以下是这些事件处理函数简要说明: 鼠标按下事件 (mousePressEvent): 当鼠标按下时触发。在该函数,你可以处理鼠标按下时逻辑,获取鼠标坐标、进行拖拽等。...鼠标释放事件 (mouseReleaseEvent): 当鼠标释放时触发。你可以在该函数处理鼠标释放时逻辑,执行点击操作。...鼠标滚轮事件 (wheelEvent): 当鼠标滚轮滚动时触发。你可以在该函数处理鼠标滚轮事件放大缩小、滚动视图等。 键盘按下事件 (keyPressEvent): 当键盘按键被按下时触发。...鼠标滚轮事件 (wheelEvent): 根据滚轮滚动方向,调整 g_x 值,然后使用 zoom 方法进行缩放

25310

接上一篇事件详解

事件类型: DOM3级事件规定了以下几类事件;如下: UI事件: 当用户与页面上元素交互时触发; load事件:当页面加载完后(包括所有图像,所有javascript文件,css文件等外部资源),就会触发...,当用户向后滚动鼠标滚轮时,wheelDelta是-120倍数。...,也是在鼠标滚轮滚动时触发,与mousewheel事件一样,但是他有关鼠标滚轮信息保存在detail属性,当鼠标向前滚动时,这个属性值是-3倍数,当鼠标滚轮向后滚动时,这个属性值是3倍数;也可以给...contextmenu事件 contextmenu事件在windows操作系统下,我们是使用右键就可以自定义右键弹出菜单,但是我们使用右键时候会有默认菜单,因此我们需要使用阻止默认事件这个方法来阻止掉...;此事件也是属于鼠标事件,因此此事件包含与光标位置中所有的属性 理解hashchange事件 HTML5新增加了hashchange事件,以便在URL参数列表(url#号后面的所有参数发生改变时通知开发人员

1.8K60

打造聊天框丝滑滚动体验:AI 聊天框翻转之道

如果在 web 什么也不做,聊天体验可能是这样,需要用户手动滚动到最新消息:试想一下如何在 web 实现微信效果。每当聊天框接收到新消息时,都需要调用滚动方法滚动到消息底部。...如果仍使用 scrollIntoView 来滚动到底部,就需要监听消息体变化,每次消息更新时都要通过 JavaScript 调用一次滚动方法,会造成一些问题:频繁 JavaScript 滚动调用。...滚动条调整与滚动行为反转最核心问题已经解决了,但总觉得哪里看起来怪怪。滚动条怎么跑到左边,并且滚动行为和鼠标滚轮方向反了,滚轮向上滚,聊天框却向下滚。...(让人想起了 MacOS 连鼠标滚轮反人类体验)查阅文档发现 CSS 有个 direction: rtl; 属性可以改变内容排布方向。这样我们就可以把滚动条放回右边了。...然后在通过监听滚动事件,改变滚动方向就可以恢复鼠标滚轮滚动行为。

1K21

js事件(event)

(window.onload)、文档树是否生成(DOMContentLoaded)、键盘上某个键是否按下(keydown)、鼠标滚轮是否滚动了等等。  ...,相当于文档鼠标的坐标; target事件源;事件概念:事件最终发生在页面的那个元素上; 事件源和事件传播是息息相关 事件传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为机制,冒泡阶段或者捕获阶段...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮时候,页面的滚动条会滚动等等;这些都叫事件默认行为,如果想把这些默认行为取消了,相应js代码如下: a.onclick...Dom二级事件绑定方式,并且用e.preventDefault = true;来取消浏览器滚轮默认行为; 我们要知道常见事件默认行为有哪些,并且要知道阻止默认行为,只要绑定到这个行为事件方法最后加一句...事件委托: 事件委托是利用事件传播机制,通过判断事件源来实现,是一种高性能事件处理方式。对事件委托好处和概念详见《高程3》第402; 我们通过一个简单示例来看看事件好处。

6.6K30

关于事件前端面试题总结

移动端click事件行为与PC端有什么不同?如何屏蔽掉这个不同? Event对象,target和currentTarget区别? 说一说什么是事件冒泡,如何阻止事件冒泡?如何阻止默认事件?...移动端click事件会延迟300ms触发事件回调(只在部分手机浏览器上出现)。 为什么会这样? 因为手机浏览器需要处理翻页这样复杂手势。...如何阻止默认事件事件冒泡是指 事件开始时由最具体元素(文档嵌套层次最深那个节点)接受,然后逐级向上传播到较为不具体节点(文档)。 阻止事件冒泡方法。...另一种跨页面点击穿透问题:这次没有mask了,直接点击内按钮跳转至新页,然后发现新页面对应位置元素click事件被触发了。...最常见用法是禁用元素(及其不可滚动后代)上所有手势,以使用自己提供拖放和缩放行为(地图或游戏表面)。

1.5K50

JavaScript(十二)

事件流 ---- 最早两大浏览器厂商(IE 及 Netscape)在如何在看待浏览器事件方面还是一致。比如说,如果你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上。...最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。 事件处理程序 ---- 事件就是用户或浏览器自身执行某种动作。 click、load 和 mouseover,都是事件名字。...,要在按钮被单击时执行一些 JavaScript,可以像下面这样编写代码: <input type="button" value="Click Me" onclick="alert('Clicked...UI(User Interface,用户界面)<em>事件</em>,当用户与页面上<em>的</em>元素交互时触发 焦点<em>事件</em>,当元素获得或失去焦点时触发 <em>鼠标</em><em>事件</em>,当用户通过<em>鼠标</em>在页面上执行操作时触发 <em>滚轮</em><em>事件</em>,当使用<em>鼠标</em><em>滚轮</em>(或类似设备...这个<em>事件</em>是 HTML <em>事件</em> blur <em>的</em>通用版本 <em>鼠标</em><em>事件</em> DOM3 级<em>事件</em><em>中</em>定义了 9 个<em>鼠标</em><em>事件</em>: click: 在用户单击主<em>鼠标</em>按钮(一般是左边<em>的</em>按钮)或者按下回车键时触发 dblclick:

2.9K20

【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布绘制背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

一、鼠标滚轮缩放中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面 Canvas 画布某个位置 , Canvas 画布绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 绘制图片尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布 x..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向部位保持位置不变 ; 1、保存当前鼠标指针指向位置 首先 , 在类定义如下成员字段 , pointer_x 和 pointer_y..., 保存当前鼠标位置及比例 ; 在鼠标滚轮事件 MouseWheelEvent , 可以直接通过调用 e.getX(), e.getY() 获取到当前 鼠标指针 在 Canvas 画布坐标 ;...在鼠标滚轮缩放完成后 , 再根据鼠标指针指向位置和比例 , 结合图片缩放尺寸 , 重新计算画布偏移位置 , 以达到鼠标指向图片元素位置基本保持不变目的 ; /** * 计算新比例

2.7K10

JS事件

事件传播 拖拽案例---鼠标按下,移动,松开事件 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll替代 判断滚轮上滚还是下滚----火狐不支持,由detail...替代 取消滚动条随滚轮移动默认行为 键盘事件 浏览器对象模型---navigator 通过 属性名 in 对象 可以判断对应属性在当前对象是否存在 浏览器对象模型---History 浏览器对象模型...等,尽管解决了返回顶部问题但仍存在其他缺陷 (3)事件处理函数工作机制,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用JavaScript代码返回值被传递给事件处理函数...div,那么就让鼠标呆在点击出,而不是跑到左上角,计算出div在每次鼠标点击时需要偏移量即可 ---- 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll...替代 d1.onmousewheel=function() { alert("鼠标滚轮滚动了"); }; //为div绑定一个鼠标滚轮事件

12.6K10

ArcGIS Maps SDK for JavaScript系列之二:认识Map和MapView

在 ArcGIS Maps SDK for JavaScript ,Map 和 MapView 是两个重要概念,用于创建和展示地图应用程序。...它可以是Geometry(点、线或面)、Graphic(地图上一个图形)或任何具有位置信息对象。 options:可选参数,用于指定视图切换选项,动画过渡、缩放级别等。...详细方法和参数说明可以参考ArcGIS API for JavaScript官方文档。 2、on()(事件监听) 参数:Object对象 描述:注册监听地图事件。...“mouse-wheel”:当用户在地图上使用鼠标滚轮时触发。 “pointer-down”:当用户在地图上按下任意指针设备按钮(鼠标按钮、触摸屏等)时触发。...}); view.on('mouse-wheel', (event) => { // 处理鼠标滚轮事件 console.log('mouse-wheel 事件触发') });

38430

如何使用jQuery操作浏览器窗口事件?【jQuery框架应用入门15】

这些事件在浏览器窗口比较直观,但实际上这两种情况也可以发生在html元素某个节点上。本节以较为直观浏览器窗口事件为例来说明jQuery窗口事件使用。案例源代码: 网页预览效果如图5-22所示: 图5-22面效果 在jQueryscroll事件是当滚轮出现时,用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生事件。...在这个代码,一旦触发scroll事件,就会弹出如图5-23所示提示。...根据业务需要,有时候在没有滚动条情况下要触发鼠标滚动事件,如在页面实现图片切换效果,就要回归使用JavaScript方式将document绑定到mousewheel事件上。...代码如下所示: document.onmousewheel = function() { //鼠标滚轮滚动后发生代码 };

5510
领券