Onmouse事件(js)鼠标10大事件

17 篇文章 0 订阅
3 篇文章 0 订阅

 

Js中鼠标事件有很多,例如点击、移动、移入、移出、滚轮滚动等等。

这里我总结了10大鼠标事件,供参考学习。

 

 

鼠标事件又可分为点击、移动

点击又可分为:点击、双击、长按、多按钮同时等等。

移动又可分为:移入,移出,移动等等。

 

1.点击事件

我们先来看一下常用的点击事件吧。点击事件可以说是最常用的啦!

  01.onclick,点击鼠标左键。event.button返回值为0.

  特点:针对鼠标左键的点击。

  02.onmousedown,点击鼠标按键。event.button返回值为012.具体看点击哪个按钮。

  特点:点击鼠标任何一个按钮都会触发事件。

  03.onmouseup,鼠标松开。

  特点:松开鼠标任何一个按钮都会触发事件。按下多个按钮,只要松开一个就会触发。

  04. ondblclick,双击鼠标左键。

   00.我们还可以加判断,根据不同的点击执行不同的函数。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
以下是一个基于 JavaScript 的以鼠标位置为中心的滑轮放大功能的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Zoom on Mousewheel</title> <style> .container { position: relative; width: 500px; height: 500px; overflow: hidden; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://picsum.photos/500'); background-size: cover; background-position: center; transition: transform 0.5s ease-in-out; transform-origin: left top; } </style> </head> <body> <div class="container"> <div class="image"></div> </div> <script> var container = document.querySelector('.container'); var image = document.querySelector('.image'); var x = 0, y = 0, scale = 1; container.addEventListener('wheel', function(event) { event.preventDefault(); var delta = event.deltaY; var rect = container.getBoundingClientRect(); x = event.clientX - rect.left; y = event.clientY - rect.top; scale += delta > 0 ? -0.1 : 0.1; scale = Math.min(Math.max(scale, 0.5), 3); image.style.transform = 'translate(-' + x + 'px, -' + y + 'px) scale(' + scale + ') translate(' + x + 'px, ' + y + 'px)'; }); </script> </body> </html> ``` 这个示例代码中,我们首先创建了一个 div 容器,内部包含一个具有背景图片的 div 元素。我们使用 CSS 将其设置为相对定位容器,并将其宽高设置为 500px,并将 overflow 属性设置为 hidden,以便我们可以在容器内部缩放背景图片。 我们还使用 CSS 将背景图片的宽高设置为 100% 并且使用 background-position 属性将其居中。我们还对 div 元素应用了一些过渡和变换效果,以便在缩放时过渡平滑。 接下来,我们使用 JavaScript 获取容器和图像元素,并声明了一些用于存储当前缩放比例和鼠标位置的变量。我们将鼠标位置存储在变量 x 和 y 中,并使用事件对象的 delta 属性检测滑轮滚动方向。我们将缩放比例存储在变量 scale 中,并使用 Math.min 和 Math.max 方法限制其值在 0.5 和 3 之间。 最后,我们使用变换属性将图像元素缩放到指定比例,并将其移动到鼠标位置。这是通过先将图像元素向左上角移动 x 和 y 像素,然后进行比例缩放,最后再将其向右下角移动 x 和 y 像素来实现的。 这就是一个简单的以鼠标位置为中心的滑轮放大功能的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值