html5下的鼠标滚轮事件

html中鼠标滚轮事件onmousewheel的处理方法 下面小编就为大家带来一篇html中鼠标滚轮事件onmousewheel的处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 立即下载

各家浏览器中的鼠标滚轮事件并未统一(主要是firefox比较另类),这给开发者造成了一点麻烦。

所以,先判断当前浏览器是否是firefox:

function isFireFoxFunc()
{
    var idx = navigator.userAgent.toLowerCase().indexOf("firefox");
	return idx >= 0;
}

var isFirefox = isFireFoxFunc();

添加事件响应,firefox的对鼠标滚轮的事件名为:DOMMouseScroll,其它浏览器下,用mousewheel即可。

我这里的代码中用了jQuery, canvas是jQuery对象。

var eventName = isFirefox ? "DOMMouseScroll" : "mousewheel";
canvas.get(0).addEventListener(eventName, MouseWheelHandler, false);
在事件向应函数中,firefox通过e.detail、其它浏览器通过e.wheelDelta来通知开发者滚轮的方向和滚动距离。

firefox下,e.detail定义负值为向上滚动,其它浏览器定义负值为向下滚动,各浏览器对且滚动距离的定义的单位也不同。

所以,在事件响应函数中,先对滚轮的方向和滚动距离做归一化处理,再完成其它操作。

function MouseWheelHandler(e) {
	//normalize wheel scroll degree, positive: up scroll, negative: down scroll.
	var normalizedWheelAmp = isFirefox ? ( e.detail / -3 ) : ( e.wheelDelta / 120 ); 
		
	//TODO: Mousewheel event handler
}



用HTML5实现鼠标滚轮事件放大缩小图片的功能 主要介绍了用HTML5实现鼠标滚轮事件放大缩小图片的功能,其中Safari浏览器用户要注意是否禁用了鼠标滚动控制页面滑动的功能,需要的朋友可以参考下 立即下载

相关推荐

游戏安全逆向实战:如何用010Editor绕过ACE反作弊的文件校验(附详细步骤)

本文详细介绍了如何通过逆向工程思维和010Editor工具,针对PC游戏中ACE反作弊系统的文件校验机制进行分析与绕过。文章以实战案例为核心,逐步拆解了定位校验逻辑、解析校验数据文件、计算并替换哈希值的关键步骤,为安全研究人员提供了一种在用户态(Ring 3)层面进行轻量化对抗的思路与方法。

iii12的专栏 723

Javascript和jquery事件--鼠标事件的小结

1、鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout。   <1>其中mouseup和mousedown组成了单击(click),双击(dblclick)事件,或许还有拖拽事件,不过我还没有涉及到。表单事件上的foucs,blur事件应该也与之相关。   在一类...

weixin_30640291的博客 146

(1)大蚂蚁即时通讯

即时通讯软件BigAnt(大蚂蚁)是杭州艾朴软件推出的一个”企业级”的即时通讯平台。该平台专为企业,其他企事业单位和政府单位而设计,目的就是为了增强内部沟通能力,提高内部员工的工作效率;同时服务器就直接置于单位内部,所有信息由单位自己管理,让单位以更安全、更可伸缩和更易于管理的方式灵活方便地使用协同和通信服务的功能! BigAnt(大蚂蚁)即时通讯软件包括服务器端和客户端。客户端功能包括单位

少安的砖厂 2233

HTML鼠标滚轮事件

<!DOCTYPE html> <html> <head> <title>其他事件</title> <meta charset="utf-8" /> <style type="text/css"> .msg{ width:600px; margin:100px auto 0px auto; color:#ff0000; ...

Playful_Elbow的博客 2379

【漏洞复现】7-Zip目录穿越漏洞(CVE-2025-11001)

摘要:CVE-2025-11001是7-Zip(v21.02-v24.09)Windows版处理ZIP包符号链接时的高危漏洞,攻击者可构造恶意ZIP文件实现目录穿越和任意文件写入。漏洞源于路径检查缺陷,当用户解压含特殊符号链接的压缩包时,可能将文件写入系统目录。复现利用GitHub公开的Python脚本(https://github.com/pacbypass/CVE-2025-11001)可生成攻击包,需注意该漏洞仅影响Windows且需要用户交互。

LongL_GuYu的博客 1607

pip——【Fatal error in launcher: Unable to create process】的深度排查与修复指南

本文深度解析了Python包管理工具pip报错【Fatal error in launcher: Unable to create process】的根本原因与解决方案。该错误通常由Python解释器路径变更、虚拟环境损坏或多版本冲突导致。文章提供了从快速排查到彻底修复的完整指南,包括使用`python -m pip`命令绕过启动器、修复或重装pip、重建虚拟环境等核心方法,并给出了预防此错误的最佳实践。

weixin_29306261的博客 598

事件之事件类型-滚轮事件(WheelEvent)

一 定义 鼠标事件还有一个名为滚轮事件的子类别 滚轮事件只有一个事件 mousewheel,反映的是鼠标滚 轮或带滚轮的类似设备上滚轮的交互 二 客户端坐标 0、属性:clientX 和 clientY 1、定义: 鼠标事件都是在浏览器视口中的某个位置上发生的 这些信息被保存在 event 对象的clientX 和 clientY 属性中 这两个属性表示事件发生时鼠标光标在视口中的坐标,所有浏览器都支持 2、图示: 3、获取方式: // 可以通过下面的方式获取鼠标事件的客户端坐标

xiaoyangzhu的博客 1万+

杂记 | 使用keycloak实现SSO单点登录(新手向,概念、原理、逻辑、详细步骤、难点解释)

使用keycloak实现SSO单点登录(概念、原理、逻辑、详细步骤、难点解释)

野生猿林仔的博客 2万+

html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍。Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其...

weixin_39771987的博客 1890

从东南大学906被刷到调剂过程(内含个人感想)

介绍了自己在看到初试成绩,到后期复习以及调剂的全过程,当中也包含了自己的复试中的感想,希望大家理性看待。

Philo的博客 2854

YOLOv13改进策略【Backbone/轻量化】| 替换骨干网络 CVPR-2024 StarNet,超级精简高效的轻量化模块

本文记录的是。StarNet设计简洁,没有复杂的设计和精细调整的超参数,仅是一个 4 阶段的分层架构。并且其中能够在低维空间计算的同时考虑极高维的特征这一特性,进而提高模型精度。本文在替换骨干网络中配置了原论文中的starnet_s1starnet_s2starnet_s3和starnet_s4七种模型,以满足不同的需求。

Limiiiing的博客 669

html+两个滚轮,2 行 JS 代码实现页面横向滚动特效

作者 | 峰华 责编 | 梦依丹出品 | 峰华的个人博客在前端这个无奇不有的世界里,有些网站不是正常垂直滚动的,而是横向滚动的:那么在没法把鼠标滚轮横过来的前提下(苹果除外),能否实现网页横向滚动呢?我们来写代码试试。先看一下最终效果,这里我用鼠标的滚轮垂直滚动,页面是横向滚动的。要实现这个功能,只需要一点点的 JS 代码。编写 HTML 结构先看一下 HTML 结构,很简单,就是三个模拟全屏页面...

weixin_39763683的博客 745

Tessent ATPG Flow 流程 (代码和注释)

**摘要:Tessent ATPG流程分为五个阶段:1) 环境初始化(加载设计文件、库和扫描链配置);2) DRC规则检查(验证设计可测试性并修复违例);3) ATPG向量生成(设置故障模型并运行引擎优化覆盖率);4) 向量验证与后处理(仿真验证并生成ATE格式文件);5) 进阶操作(多电压域和存储器测试)。流程输出包括测试向量、覆盖率报告和验证日志,支持stuck-at和transition故障模型,使用Tcl脚本控制。关键步骤包含扫描链配置、EDT压缩和覆盖率优化。

QQ_778132974的博客 929

如何在HTML5页面中使用鼠标滚轮事件

滚动的事件很神奇,想了解他的神奇就来这里看吧

张函 1万+

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能

您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面.看看实际的示范效果大多数浏览器支持鼠标滚轮事件,因此您可以先订阅鼠标滚轮事件方法. 触发事件后,您将获得一个名为wheelDelta的属性,该属性表示鼠标滚轮的大小刚好改变,其中正值表示滚轮向下滑动,而负值表示滚...

weixin_39805924的博客 2483

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

HTML5是如何使用鼠标滚轮事件的

你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中,鼠标滚轮并不仅仅就只能上下滑动网页,实际上你还可以依靠这个完成更多的功能,比如视野平面的放大与缩小。 看看实际演示效果  大部分浏览器都是支持鼠标滚轮事件的,所以你可以先订阅鼠标滚轮事件的方法,每当事件被触发时,你能获取一个名为 wheelDelta 的属性,它代表刚才鼠标

jumtre的专栏 3975

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

html5 鼠标滚轮,如何在HTML5页面中使用鼠标滚轮事件

支持鼠标滚轮可以为HTML5网页增加更多的交互性。不仅是滚动页面,您还可以执行不同的操作,如放大或缩小。查看鼠标滚轮演示页面…大多数的浏览器都支持元素的“mousewheel”事件。您可以注册一个处理函数,在该函数上作用一个事件对象。这就暴露出了wheelDelta属性;向上滚动是正值 向下滚动的负值。值越大或越小,运动就越快越慢。但不行的是,有一个浏览器是不支持mousewheel这个事件,它就...

weixin_34303763的博客 650

html5鼠标滚轮事件mousewheel使用

html5中增加了一个新的鼠标事件onmousewheel    这个事件使用的时候要注意使用方法,不然就不会起到作用,下面是一个实例 html文件 图片变换 #image-content{ border: 1px solid green; } 你的

clh604的专栏 1万+

html鼠标滑轮下移事件,html5下的鼠标滚轮事件

各家浏览器中的鼠标滚轮事件并未统一(主要是firefox比较另类),这给开发者造成了一点麻烦。所以,先判断当前浏览器是否是firefox:function isFireFoxFunc(){var idx = navigator.userAgent.toLowerCase().indexOf("firefox");return idx >= 0;}var isFirefox = isFireF...

weixin_39620099的博客 410

滚轮y坐标html,html5鼠标滚轮事件mousewheel使用

html5中增加了一个新的鼠标事件onmousewheel这个事件使用的时候要注意使用方法,不然就不会起到作用,下面是一个实例html文件图片变换#image-content{border: 1px solid green;}你的浏览器不支持html5imagetrans.jsvar canvas=document.getElementById('image-content');var conte...

weixin_29957793的博客 230

解决chrome浏览器中鼠标滚轮滚动事件失效的问题

今天遇到了一个html5页面由于开启了图片遮罩层在chrome浏览器中,鼠标滚轮上下滚动时,页面不动的问题,后查询相关资料后解决,具体方法是加入如下代码: <script type="text/javascript"> var scrollFunc = function(e) { var direct = 0; e = e || window.e...

纸上得来终觉浅 1万+

html5 鼠标滚轮

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33700350的博客 311

鼠标滚轮事件介绍

简介   IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这 个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera, Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误,需要修改。但是Firefox没 有该事件,而是...

weixin_30372371的博客 220
上一篇: JavaScript中的值类型与引用类型
下一篇: POSIX共享内存之shm_open oflag参数注意点
小耸
博客等级 码龄17年 33粉丝 41原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值