js鼠標滑輪滾動實現圖片的放大縮小

新建一個html頁面，定名為test.html，用于實現鼠標滑輪滾動放大縮小圖片的功能。

在test.html頁面，利用img標簽建立一張圖片，下面將對該圖片進行鼠標滑輪滾動放大縮小。

給img標簽綁心猿意馬onmousewheel鼠標滑輪滾動事務，當鼠標滑輪滾動時，執行Picture（）函數，實現圖片的放大縮小。

在Picture()函數，經由過程Counting（）函數獲得鼠標滑輪滾動的幅度，用于實現對圖片放大縮小倍數判定。

編寫Counting()函數功能邏輯。若是鼠標滑輪標的目的上滑動大于120時，count加一，即放大一倍，若是鼠標滑輪標的目的下滑動小于-120時，count減一，即縮小一倍。

注：wheelDelta：當用戶標的目的上滾動鼠標滾輪時，wheelDelta屬性的值是120的倍數；當用戶標的目的下滾動鼠標滾輪時，wheelDelta屬性的值是-120的倍數。

編寫Resize（）函數，經由過程zoom屬性實現圖片的放大縮小，Resize（）函數的參數是上一步的count，即放大縮小的倍數。

在瀏覽器運行test.html，滾動鼠標的滑輪，標的目的上滾動滑輪，放大圖片，標的目的下滾動滑輪，縮小圖片。

0 條評論