資訊專欄INFORMATION COLUMN
摘要：這里的縮放不是指事件改變?yōu)g覽器窗口大小，而是指瀏覽器本身的縮放功能，一般使用以下方式進(jìn)行縮放配合鼠標(biāo)滾輪配合進(jìn)行縮放。
這里的縮放不是指resize事件（改變?yōu)g覽器窗口大小），而是指瀏覽器本身的縮放功能，一般使用以下方式進(jìn)行縮放：
ctrl配合鼠標(biāo)滾輪
ctrl配合-/+/0進(jìn)行縮放。
雖然沒有專門的縮放事件，但是可以通過監(jiān)聽以上兩種縮放操作事件進(jìn)行達(dá)到“監(jiān)聽”縮放的目地：
Ctrl+鼠標(biāo)滾輪縮放：監(jiān)聽DOMMouseScroll并判斷是否觸發(fā)了ctrl按鍵
鍵盤快捷鍵縮放：監(jiān)聽keydown并判斷按鍵是否是三種縮放操作的任一一種組合
// Ctrl+鼠標(biāo)滾輪縮放
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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105525.html
摘要：使用方法首先看一下簡易第一步，實(shí)例化滾動(dòng)對(duì)象代碼其實(shí)還是蠻簡單的，首先我們初始化一個(gè)滾動(dòng)的實(shí)例，構(gòu)造函數(shù)擁有兩個(gè)參數(shù)，第一個(gè)是一個(gè)負(fù)責(zé)管理頁面滾動(dòng)時(shí)需要處理事務(wù)的函數(shù)，這個(gè)函數(shù)接受三個(gè)參數(shù)，分別表示當(dāng)前頁面左移，向上移，縮放比信息。 ScrollerJS是什么 ScrollerJS是用于純邏輯的滾動(dòng)縮放組件，它獨(dú)立于任何指定的渲染或者事件系統(tǒng)。上面是官方定義的，我再說一下我對(duì)這個(gè)庫的理...
摘要：擁有兩個(gè)版本，無依賴的獨(dú)立版和版本。除了對(duì)象，也可監(jiān)聽內(nèi)元素的手勢需要引擎內(nèi)置對(duì)象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計(jì)，目前服務(wù)于興趣部落群動(dòng)漫騰訊學(xué)院騰訊等多個(gè)部門團(tuán)隊(duì)和項(xiàng)目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。 簡介 針對(duì)多點(diǎn)觸控設(shè)備編程的Web手勢組件，快速幫助你的web程序增加手勢支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無依賴的獨(dú)立版和react版本。...
摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。 本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...
摘要：本文代碼轉(zhuǎn)載自，通過實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)感興趣的小伙伴可以參考下面代碼。構(gòu)造一個(gè)新的縮放行為。指定當(dāng)前的縮放平移向量為如果未指定，返回當(dāng)前平移向量，默認(rèn)。 本文代碼轉(zhuǎn)載自Stack Overflow，通過d3.js實(shí)現(xiàn)縮放很簡單，但是滾輪和按鈕能夠完美縮放就不那么容易了，如果有對(duì)d3感興趣的小伙伴可以參考下面代碼。 JSFiddle地址: ...
閱讀 2233·2019-08-30 15:53
閱讀 2463·2019-08-30 12:54
閱讀 1208·2019-08-29 16:09
閱讀 734·2019-08-29 12:14
閱讀 761·2019-08-26 10:33
閱讀 2486·2019-08-23 18:36
閱讀 2962·2019-08-23 18:30
閱讀 2124·2019-08-22 17:09
