您現在的位置是:電腦技術吧?>? 組裝維修 ??>??鼠標滾輪放大縮小功能,鼠標滾輪放大縮小??>??正文詳情

鼠標滾輪放大縮小功能,鼠標滾輪放大縮小

任雪羽2019-11-27 10:21:56 人圍觀
簡介cad鼠標滾輪放大縮小設置您和我都知道,將鼠標滾輪事件添加到HTML5網頁可以更好地讓用戶與網頁交互。在HTML5中,鼠標滾輪不僅可以上下滑動網頁,其實你還可以依靠這個來完成更多的

你我都知道在HTML5網頁中添加鼠標滾輪事件能夠更好的讓用戶與網頁進行交互操作。

而在HTML5中,鼠標滾輪并不僅僅就只能上下滑動網頁,實際上你還可以依靠這個完成更多的功能,比如視野平面的放大與縮小。

  看看實際演示效果  大部分瀏覽器都是支持鼠標滾輪事件的,所以你可以先訂閱鼠標滾輪事件的方法,每當事件被觸發時,你能獲取一個名為 wheelDelta 的屬性,它代表剛才鼠標滾輪改變的大小,其中正值表示滾輪往下滑動,負值表示滾輪往上滑動。

數值的絕對值越大,滑動范圍越大。

  但不幸的是依然有一款瀏覽器是不支持鼠標滾輪事件的。

那就是FireFox。

Mozilla 已經實現了一個名為DOMMouseScroll的事件的處理,它會傳遞一個名為 event 且附帶了名為 detail 屬性的事件參數過來,然而,這個 detail 屬性不同于 wheelDelta,它只能返回正值,即只能堅持鼠標滾輪向下滾動的值。

  你應該特別注意一下,Apple公司在Safari瀏覽器中也禁用了鼠標滾動控制頁面上下滑動,但是此功能依然在webkit引擎中正常使用的,所以你寫的代碼是不會觸發什么問題的。

  添加鼠標滾輪事件處理方法  首先我們在網頁中添加一個圖片,待會就能用鼠標滾輪控制此圖片的縮放  XML/HTML Code復制內容到剪貼板  

  現在來添加鼠標滾輪事件處理代碼  XML/HTML Code復制內容到剪貼板  var myimage = document.getElementById(myimage);  if (myimage.addEventListener) {  // IE9, Chrome, Safari, Opera  myimage.addEventListener(mousewheel, MouseWheelHandler, false);  // Firefox  myimage.addEventListener(DOMMouseScroll, MouseWheelHandler, false);  }  // IE 6/7/8  else myimage.attachEvent(onmousewheel, MouseWheelHandler);  為了讓不同瀏覽器都能支持的處理做法  在下面這個案例中,我們將對Firefox的detail值取反然后返回1或者-1的其中一個  XML/HTML Code復制內容到剪貼板  function MouseWheelHandler(e) {  // cross-browser wheel delta  var e = window.event || e; // old IE support  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));  現在我們直接決定圖片的大小范圍。

以下代碼將圖片的寬度范圍設置在50-800個像素之間  XML/HTML Code復制內容到剪貼板  myimage.style.width = Math.max(50, Math.min(800, myimage.width (30 * delta))) px;  return false;  }  最后一點,我們在方法中返回false是為了終止標準的鼠標滾輪事件處理,以防它上下滑動網頁。

  查看實際演示

版權聲明:本文由 任雪羽 整理編輯。

原標題:鼠標滾輪不能放大縮小,怎么設置鼠標滾輪放大縮小

轉載注明出處:http://www.dn9ww09s.icu/assemble/14552.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務

    兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務 相關圖片兼職貓個人認證可以發什么如今,越來越多的大學生會利用業余時間做兼職,不僅鍛煉身體,還能掙零花錢。所以作為一個企業,你想通過它找到可靠的大學生。那么,兼職貓如何才能...

  • 怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5

    怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5 相關圖片手機瀏覽器支持HTML5HTML5、CSS3等相關技術,如canvas、websocket等,將web應用開發推向了一個新的高度。該技術將HTML、CSS和JavaScript結合起來UC瀏覽器支持HTML5嗎...

  • app有什么用,好用app

    app有什么用,好用app 相關圖片應用軟件魔獸軍團伴侶是一款官方的魔獸世界游戲助理軟件。那么你是如何運作魔獸軍團的?如果你對魔獸軍團感興趣看片軟件哪個最好用...

  • 's和s'的用法,最高級的用法

    's和s'的用法,最高級的用法 相關圖片比較級的用法和句型準限定選擇器您應該避免過度修改選擇器,例如,如果您可以編寫。NAV{},盡量不要寫UL。導航{}。過度修改選擇器將影響選擇器的性能、類的可重用性和私有度。這...

  • 軟件undefined是什么意,下載undefined是什么意思

    軟件undefined是什么意,下載undefined是什么意思 相關圖片undefined吧win10系統越來越穩定,許多微軟用戶正在將自己的計算機系統升級為win10系統。然而,許多用戶報告他們正在下載更新的FBL﹣expression profesundefined錯誤代碼...

  • 全民K歌,全民k歌5.3.7

    全民K歌,全民k歌5.3.7 相關圖片全民k歌6.1版本民族卡拉OK是一款非常有趣的手機卡拉OK軟件,用戶不用出門就能感受到卡拉OK的樂趣。用戶還可以在聽到自己喜愛的歌手的歌聲時送上禮物表示支持。那么如何贈送全國卡...

  • 指南的編寫過程,指南編寫格式

    指南的編寫過程,指南編寫格式 相關圖片運作手冊編寫指南代碼如下:[selector]{[property]:[value];[-declaration-]}P[selector]{[property]:[value指南編寫樣章...

  • 美顏相機眼淚,美顏相機怎么能弄眼淚

    美顏相機眼淚,美顏相機怎么能弄眼淚 相關圖片美顏相機哪個好用美的相機是一個強大的照片美化軟件。最近,很多小朋友都說看到朋友們在曬眼睛和化妝,覺得很美。那么美妝相機的新催淚效果呢?接下來,超人軟件編輯將為您介...

  • 浮動的元素能怎么居中,浮動元素居中

    浮動的元素能怎么居中,浮動元素居中 相關圖片如何讓浮動的div居中方法1:將容器的浮動模式設置為絕對定位,然后確定容器的寬度和高度,例如寬度為500、高度為300的層,然后將層的外部邊距設置為CSS代碼,將內容復制到剪貼板...

  • oppo手機怎么連接電視機,手機怎么連接電視步驟

    oppo手機怎么連接電視機,手機怎么連接電視步驟 相關圖片vivo手機有dlna功能嗎隨著科學技術的不斷進步,現在我們不僅可以把電視和電腦連接起來,還可以把手中的小智能手機和電腦連接起來。如何將手機連接到電視上?今天,超人的小制作、...

熱評文章

  • 余額寶有上限嗎,余額寶

    余額寶有上限嗎,余額寶 相關圖片余額寶即將取消余波的投資方法非常簡單,即使是新手理財也能輕松操作。但近日支付寶安卓版余額寶宣布調整個人投資上限。今天,小編為大家帶來了一款個人投資上限的支付寶余額...

  • 百分比,百分比怎么求

    百分比,百分比怎么求 相關圖片計算百分比許多CSS屬性的值可以是百分比值。雖然從形式上講,百分比值的形式是數字后跟%值(注意數字和%值之間不能有空格),但其含義在不同的情況下會有所不同。因此,百分率可...

  • 無障礙專車,滴滴無障礙專車

    無障礙專車,滴滴無障礙專車 相關圖片滴滴關愛出行無障礙車近年來,為有特殊需要的旅客提供專屬服務越來越受到重視。未來,滴滴的安卓版已經宣布,它將能夠使用無障礙汽車為特殊人群。讓我們看看滴滴無障礙車的預...

  • win7桌面圖標異常,win7不顯示桌面圖標

    win7桌面圖標異常,win7不顯示桌面圖標 相關圖片win7桌面圖標怎么變小超人編輯今天想談談win7的一些基礎課程。本課程介紹Windows 7桌面圖標的顯示方法。主要針對Windows7家庭普通版和高級版用戶。沒有個性化配置條目,因win7桌面不顯示...

  • css有多少選擇符,css的選擇符

    css有多少選擇符,css的選擇符 相關圖片css三種基本選擇符原來的名字可以這么一段時間以前,我在一個網站上看到這樣的內容:這個也可以嗎?這是我的第一印象。不過,經過一番調查,我們知道這確實有效。另外,“U”的...

  • 哈羅單車開鎖,哈羅單車怎么開鎖

    哈羅單車開鎖,哈羅單車怎么開鎖 相關圖片哈羅單車開鎖破解近日,不少朋友向小編反映,小明自行車的車鎖經常打不開。那么如何應對安卓版小明自行車無法解鎖的情況。今天,超人小編為大家帶來了小明自行車解鎖失敗的解...

  • 茨林面板,面板

    茨林面板,面板 相關圖片顯示面板快捷鍵可以提高我們平時的工作效率。今天,我將介紹Dreamweaver文件面板的快捷鍵。vcm面板...

  • 電腦開機要選擇系統,win7系統如何去除桌面水印

    電腦開機要選擇系統,win7系統如何去除桌面水印 相關圖片電腦開機兩個系統選擇win系統下設置了6個文件夾,包括視頻、圖片、文檔、下載、音樂和桌面。但是由于有六個文件夾,整個資源管理器頁面變得更加復雜。有沒有辦法把這臺電腦下面...

  • 表單提交,已提交表單

    表單提交,已提交表單 相關圖片html提交表單以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一重大貢獻。以前,我們的HTML表單數據是通過服務器端的鍵值模式傳輸的,缺乏數據組織管理,非常原網頁表單提交...

  • 白條閃付入口沒了,白條閃付的開通條件

    白條閃付入口沒了,白條閃付的開通條件 相關圖片京東白條閃付微信支付看到身邊的小伙伴們打開京東白條,生活變得更加方便。你還想開京東白條付款嗎?如果你想打開京東白條的flash支付,但是你不知道打開的入口在哪里,你可以看...

關注微信

变脸官网查询