浏览器缩放监听

Paul_King 发布于2019-08-23 18:36 / 2264人阅读

摘要：这里的缩放不是指事件改变浏览器窗口大小，而是指浏览器本身的缩放功能，一般使用以下方式进行缩放配合鼠标滚轮配合进行缩放。

这里的缩放不是指resize事件（改变浏览器窗口大小），而是指浏览器本身的缩放功能，一般使用以下方式进行缩放：

ctrl配合鼠标滚轮

ctrl配合-/+/0进行缩放。

虽然没有专门的缩放事件，但是可以通过监听以上两种缩放操作事件进行达到“监听”缩放的目地：

Ctrl+鼠标滚轮缩放：监听DOMMouseScroll并判断是否触发了ctrl按键

键盘快捷键缩放：监听keydown并判断按键是否是三种缩放操作的任一一种组合

//  Ctrl+鼠标滚轮缩放
document.addEventListener("DOMMouseScroll", function (e) {
  //监测滚轮事件中是否按下了Ctrl键
  if (e.ctrlKey) {
   //xxx
  }
})

//c2   键盘快捷键缩放
document.addEventListener("keydown", function (e) {
  //按下Ctrl 以及以下任意一键：+ - 或 0
  if (e.ctrlKey && (e.code === "Equal" || e.code === "Minus" || e.code === "Digit0")) {
    xxx
  }
})

提示：获取缩放比例：window.devicePixelRadio

专线服务私有云监听浏览器标签关闭切割缩放鼠标缩放缩放效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105525.html

解决多场景/多端的页面滚动缩放组件-ScrollerJS

摘要：使用方法首先看一下简易第一步，实例化滚动对象代码其实还是蛮简单的，首先我们初始化一个滚动的实例，构造函数拥有两个参数，第一个是一个负责管理页面滚动时需要处理事务的函数，这个函数接受三个参数，分别表示当前页面左移，向上移，缩放比信息。 ScrollerJS是什么 ScrollerJS是用于纯逻辑的滚动缩放组件，它独立于任何指定的渲染或者事件系统。上面是官方定义的，我再说一下我对这个库的理...

fuyi501 2019-08-23 12:34 评论0 收藏0
超级小的web手势库AlloyFinger发布

摘要：拥有两个版本，无依赖的独立版和版本。除了对象，也可监听内元素的手势需要引擎内置对象支持绑定相关事件。据不完全统计，目前服务于兴趣部落群动漫腾讯学院腾讯等多个部门团队和项目。也可以在事件回调里根据携带的信息使用去操作。简介针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。...

ymyang 2019-08-19 18:24 评论0 收藏0
d3.js实现svg缩放功能

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。 JSFiddle地址: ...

刘玉平 2019-08-01 17:29 评论0 收藏0
d3.js实现svg缩放功能

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。 JSFiddle地址: ...

guqiu 2019-08-20 18:55 评论0 收藏0