HTML5是如何使用滑鼠滾輪事件的

2021-06-22 19:01:21 字數 2070 閱讀 8987

你我都知道在html5網頁中新增滑鼠滾輪事件能夠更好的讓使用者與網頁進行互動操作。而在html5中,滑鼠滾輪並不僅僅就只能上下滑動網頁,實際上你還可以依靠這個完成更多的功能,比如視野平面的放大與縮小。

大部分瀏覽器都是支援滑鼠滾輪事件的,所以你可以先訂閱滑鼠滾輪事件的方法,每當事件被觸發時,你能獲取乙個名為 wheeldelta 的屬性,它代表剛才滑鼠滾輪改變的大小,其中正值表示滾輪往下滑動,負值表示滾輪往上滑動。數值的絕對值越大,滑動範圍越大。

但不幸的是依然有一款瀏覽器是不支援滑鼠滾輪事件的。那就是firefox。mozilla 已經實現了乙個名為"dommousescroll"的事件的處理,它會傳遞乙個名為 event 且附帶了名為 detail 屬性的事件引數過來,然而,這個 detail 屬性不同於 wheeldelta,它只能返回正值,即只能堅持滑鼠滾輪向下滾動的值。

<htmllang="en">

<head>

<metacharset="utf-8"/>

<title>html5是如何使用滑鼠滾輪事件的

<style>

*

body

#squirrel

<body>

<header>

<h1>html5是如何使用滑鼠滾輪事件的

<article> <imgid="squirrel"src=alt="a squirrel"/>

<script>

window.onload = function() ;

sq.e = document.getelementbyid("squirrel");

if (sq.e.naturalwidth)

else

sq.zoom = 30;

if (sq.e.addeventlistener)

else sq.e.attachevent("onmousewheel", mousewheelhandler);

function mousewheelhandler(e)

}

HTML5 是如何起步的?

html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。whatwg 致力於 web 表單和應用程式,而 w3c 專注於 xhtml...

HTML5如何使用SVG

幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號,就跟我第一次見他們一樣,別著急,我們從基礎看起。svg 是一種基於 xml 語法的影象格式,全稱是可縮放向量圖 scalable vector graphics 其他影象格式都是基於畫素處理的,svg 則是屬於對影象...

html5 標準結構 什麼是HTML5

html5是指全球資訊網的核心語言 標準通用標記語言下的乙個應用 超文字標記語言 html 的第五次重大修改,2014年10月29日,全球資訊網聯盟宣布,經過接近8年的艱苦努力,該標準規範終於制定完成。html5的設計目的是為了在移動裝置上支援多 新的語法特徵被引進以支援這一點,如video aud...