瀏覽器縮放監(jiān)聽

Paul_King 發(fā)布于2019-08-23 18:36 / 2473人閱讀

摘要：這里的縮放不是指事件改變?yōu)g覽器窗口大小，而是指瀏覽器本身的縮放功能，一般使用以下方式進行縮放配合鼠標滾輪配合進行縮放。

這里的縮放不是指resize事件（改變?yōu)g覽器窗口大小），而是指瀏覽器本身的縮放功能，一般使用以下方式進行縮放：

ctrl配合鼠標滾輪

ctrl配合-/+/0進行縮放。

雖然沒有專門的縮放事件，但是可以通過監(jiān)聽以上兩種縮放操作事件進行達到“監(jiān)聽”縮放的目地：

Ctrl+鼠標滾輪縮放：監(jiān)聽DOMMouseScroll并判斷是否觸發(fā)了ctrl按鍵

鍵盤快捷鍵縮放：監(jiān)聽keydown并判斷按鍵是否是三種縮放操作的任一一種組合

//  Ctrl+鼠標滾輪縮放
document.addEventListener("DOMMouseScroll", function (e) {
  //監(jiān)測滾輪事件中是否按下了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

GPU云服務器云服務器監(jiān)聽瀏覽器標簽關(guān)閉切割縮放鼠標縮放縮放效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105525.html

相關(guān)文章

解決多場景/多端的頁面滾動縮放組件-ScrollerJS

摘要：使用方法首先看一下簡易第一步，實例化滾動對象代碼其實還是蠻簡單的，首先我們初始化一個滾動的實例，構(gòu)造函數(shù)擁有兩個參數(shù)，第一個是一個負責管理頁面滾動時需要處理事務的函數(shù)，這個函數(shù)接受三個參數(shù)，分別表示當前頁面左移，向上移，縮放比信息。 ScrollerJS是什么 ScrollerJS是用于純邏輯的滾動縮放組件，它獨立于任何指定的渲染或者事件系統(tǒng)。上面是官方定義的，我再說一下我對這個庫的理...

fuyi501 2019-08-23 12:34 評論0 收藏0
超級小的web手勢庫AlloyFinger發(fā)布

摘要：擁有兩個版本，無依賴的獨立版和版本。除了對象，也可監(jiān)聽內(nèi)元素的手勢需要引擎內(nèi)置對象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計，目前服務于興趣部落群動漫騰訊學院騰訊等多個部門團隊和項目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。簡介針對多點觸控設(shè)備編程的Web手勢組件，快速幫助你的web程序增加手勢支持，也不用再擔心click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。...

ymyang 2019-08-19 18:24 評論0 收藏0
d3.js實現(xiàn)svg縮放功能

摘要：本文代碼轉(zhuǎn)載自，通過實現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對感興趣的小伙伴可以參考下面代碼。構(gòu)造一個新的縮放行為。指定當前的縮放平移向量為如果未指定，返回當前平移向量，默認。本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...

劉玉平 2019-08-01 17:29 評論0 收藏0
d3.js實現(xiàn)svg縮放功能

摘要：本文代碼轉(zhuǎn)載自，通過實現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對感興趣的小伙伴可以參考下面代碼。構(gòu)造一個新的縮放行為。指定當前的縮放平移向量為如果未指定，返回當前平移向量，默認。本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...

guqiu 2019-08-20 18:55 評論0 收藏0