滑鼠中鍵滾動mousewheel事件例項程式碼
本章節分享一段程式碼例項,它演示滾動滑鼠中鍵的相關事件。
這裡不會對它的實現過程做分析,因為在論壇的其他文章中已經有詳細的介紹。
具體可以參閱js實現的相容所有瀏覽器的滑鼠中鍵滾動事件一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ width:3000px; height:500px; background:#666; } </style> <script> window.onload=function(){ var dbody=document.getElementById('antzone'); objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);}) objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);}) objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);}) function mouse_scroll(e){ var e=e || window.event; var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//判斷上下方向 var move_s=delD>0?-50:50; document.documentElement.scrollLeft+=move_s; //非chrome瀏覽器用這個 //chrome瀏覽器用這個 if(document.documentElement.scrollLeft==0) document.body.scrollLeft+=move_s; return false; } //這個是給物件增加監控方法的函式 function objAddEvent(oEle, sEventName, fnHandler){ if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler); else oEle.addEventListener(sEventName, fnHandler, false); } } </script> </head> <body> <div id="antzone"></div> </body> </html>
相關文章
- JavaScript滑鼠中鍵滾動事件JavaScript事件
- css取消滑鼠事件程式碼例項CSS事件
- 禁用滑鼠右鍵例項程式碼
- jQuery禁用滑鼠右鍵程式碼例項jQuery
- javascript鍵盤事件程式碼例項JavaScript事件
- 相容所有瀏覽器的js滑鼠中鍵滾動事件瀏覽器JS事件
- 滑鼠滾動固定js(jquery)例項分享JSjQuery
- js監聽鍵盤事件程式碼例項例項JS事件
- 遮蔽滑鼠右鍵選單例項程式碼單例
- 網頁禁用滑鼠右鍵程式碼例項網頁
- mousewheel 模擬滾動
- 學習 JS滾輪事件(mousewheel/DOMMouseScroll)JS事件
- 美化滾動條效果程式碼例項
- 公告文字水平滾動例項程式碼
- js標題title滾動程式碼例項JS
- css隱藏滾動條程式碼例項CSS
- javascript文字水平滾動程式碼例項JavaScript
- js實現的相容所有瀏覽器的滑鼠中鍵滾動事件JS瀏覽器事件
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- JQuery4:滑鼠事件和滾動事件jQuery事件
- js獲取滾動條高度例項程式碼JS
- 頁面全屏垂直平滑滾動程式碼例項
- 表格拖動滾動條標題固定程式碼例項
- 拖動滾動條載入資料程式碼例項
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- 滑鼠懸浮實現抖動效果例項程式碼
- js實現的文字垂直滾動例項程式碼JS
- jQuery列表上下垂直滾動效果程式碼例項jQuery
- js文字橫向無縫滾動程式碼例項JS
- 網頁title標題滾動效果程式碼例項網頁
- 方向鍵控制元素移動程式碼例項
- jQuery事件冒泡程式碼例項jQuery事件
- 滑鼠按住拖動具有半透明效果的程式碼例項
- 按住滑鼠可以拖動箭頭旋轉程式碼例項
- 滑鼠拖動實現將div放入方格例項程式碼
- jquery判斷滾動是否到達底部程式碼例項jQuery
- 帶有滾動條的全屏遮罩層程式碼例項遮罩