瀏覽器縮放監聽

Paul_King 發布于2019-08-23 18:36 / 2480人閱讀

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

這里的縮放不是指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

云服務器 GPU云服務器監聽瀏覽器標簽關閉切割縮放鼠標縮放縮放效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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