`

如何判断鼠标滚轮在动以及滚动方向

OperaJavaScriptHTML 
阅读更多

<html>
<head>
<script type="text/javascript">
function handle(delta) {
    var s = delta + ": ";
    if (delta <0)
        s += "您在向下滚……";
    else
        s += "您在向上滚……";
    document.getElementById('delta').innerHTML = s;
}
 
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120;
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
 

if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
</head>
<body>
<div id="delta">滚动中轮试试~请选按着中轮滚动，激活后可以不按，直接滚动。</div>
</body>
</html>

分享到：
| 自动化测试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    鼠标滚轮控制左右滑动

    在IT领域，尤其是在网页开发中，用户交互设计是至关重要的，而“鼠标滚轮控制div左右滑动”是一种增强用户体验的创新技术。标题所指的这个功能允许用户通过鼠标滚轮来实现页面或某个特定div区域的水平滚动，而不是...

    JS鼠标滚轮水平滚动特效.zip

    总的来说，"JS鼠标滚轮水平滚动特效"是一个实用的前端开发技术，它通过JavaScript和CSS的结合，使用户能够在水平方向上方便地浏览网页内容，丰富了网页交互体验。通过学习和实践这个特效，开发者可以提升自己的...

    openlayers的鼠标滚轮事件

    当用户滚动鼠标滚轮时，地图会根据滚轮的方向进行放大或缩小，这极大地提高了用户的交互效率。 #### 三、实现方法 在OpenLayers中，可以通过`Navigation`控件来控制鼠标滚轮事件的行为。下面通过具体的代码示例来...

    jqeury实现鼠标滚轮滚动无限极菜单

    在本文中，我们将深入探讨如何使用jQuery来实现一个鼠标滚轮滚动的无限极菜单，并确保其自适应不同的屏幕尺寸。这个功能在现代网页设计中非常常见，尤其适用于那些需要展示大量分类信息的网站，如电商网站的产品目录...

    js实现鼠标滚轮控制图片缩放效果的方法

    接下来，根据事件对象event的wheelDelta属性来确定滚轮的滚动方向以及滚动量。wheelDelta是一个数值，表示鼠标滚轮滚动的方向和距离。正值代表向上滚动，负值代表向下滚动。通过将这个值除以12，我们得到缩放的步进...

    jquery鼠标滚轮事件支持插件

    在给定的“jquery鼠标滚轮事件支持插件”中，我们关注的是如何利用jQuery扩展来处理鼠标的滚轮事件。这个插件允许开发者监听和响应用户滚动鼠标的滚轮，从而在网页上实现更加动态和交互的功能。 标题中的“jquery...

    winform自绘波形，鼠标滚轮滚动缩放波形尺寸

    3. **鼠标滚轮事件处理**：我们需要监听`MouseWheel`事件，当鼠标滚轮滚动时，根据滚轮的滚动方向改变波形的缩放比例。缩放的中心点应设为鼠标当前位置，这样可以实现以鼠标为中心的波形缩放效果。 4. **鼠标按下与...

    42、jQuery鼠标滚轮控制页面滑动代码

    在网页开发中，jQuery库为JavaScript开发者提供了许多便利的功能，其中之一就是通过鼠标滚轮来控制页面的滚动。这个功能在创建具有长滚动效果或者需要自定义滚动行为的网站时非常有用。下面我们将深入探讨如何使用...

    wpf 鼠标滚轮控制图片的缩放

    根据滚动方向，我们可以调整图片的缩放比例： ```csharp private void ImageControl_MouseWheel(object sender, MouseWheelEventArgs e) { // 获取当前缩放比例 double currentScale = imageControl....

    基于jquery的实现可以用鼠标滚轮控制的图片滚动上下滚动效果.zip

    `mousewheel`事件在用户滚动鼠标滚轮时触发。jQuery并没有直接提供对`mousewheel`事件的支持，但可以通过jQuery插件如`jquery.mousewheel.js`来添加这个功能。当`mousewheel`事件被触发时，我们可以获取滚动的方向...

    js图片查看器。鼠标拖动图片任意方向旋转，鼠标滚动滚轮缩放，任意角度翻转。

    2. **图片缩放**：图片查看器支持鼠标滚轮缩放，当用户滚动鼠标滚轮时，图片会相应地放大或缩小。这个功能可以通过调整图片的CSS样式（如`transform: scale()`）或者使用Canvas元素的`drawImage()`方法来实现。 3. ...

    WPF　鼠标滚轮滚动切换图片

    在事件处理程序中，我们可以获取滚轮的滚动方向（正向或反向），并据此增加或减少当前显示的图片索引。例如，如果滚轮向上滚动，我们可以选择下一个图片；反之，如果滚轮向下滚动，我们可以选择上一个图片。确保处理...

    perfect scrollbar jQuery鼠标滚轮滚动事件

    在"perfect scrollbar jQuery鼠标滚轮滚动事件"中，我们将探讨如何利用这个插件来处理鼠标的滚轮滚动事件，以及它与jQuery的交互。 首先，我们需要了解Perfect Scrollbar的基本使用方法。在引入jQuery库和Perfect ...

    jQuery鼠标滚轮滚动条代码.zip

    总的来说，“jQuery鼠标滚轮滚动条代码.zip”提供的代码可能包含了如何利用jQuery监听和处理滚轮事件，以及如何使用CSS定制滚动条样式的实例。这些技术对于提升网站交互性和用户体验至关重要。开发者可以根据自己的...

    鼠标滚轮切换图片js特效.zip

    3. **图片切换逻辑**：在事件处理函数内，根据滚轮方向或键盘按键判断是向前还是向后切换图片。然后更新当前显示的图片索引，确保显示正确的位置。 4. **动画效果**：为了提供更好的用户体验，可以添加过渡动画，如...

    原生js鼠标滚轮及左右键盘控制图片自适应切换效果代码

    在JavaScript编程中，实现“原生js鼠标滚轮及左右键盘控制图片自适应切换效果”是一种常见的用户交互设计。这个功能允许用户通过鼠标滚轮或键盘的左右箭头键来浏览一组图片，同时确保图片在不同设备和屏幕尺寸上能够...

    vbscript 鼠标滚轮 图片缩放效果

    总结来说，VBScript实现鼠标滚轮控制图片缩放的特效涉及了事件监听、DOM操作以及动态调整元素样式等技术。这个功能不仅可以增强用户的交互体验，还能为网页增添视觉吸引力。通过理解并实践这些知识点，开发者可以...

    自定义鼠标滚轮的效果 4个demo

    这个demo会介绍如何检测滚轮事件并判断滚动方向，然后根据方向加载或显示新的页面内容。这通常与无限滚动或分页插件相结合，提供更好的导航体验。 在实际应用中，开发者需要考虑兼容性问题，因为不同的浏览器可能对...

Magicbox
Global site tag (gtag.js) - Google Analytics