`

jQuery鼠标滚动事件

 
阅读更多

/** Event handler for mouse wheel event.
         *鼠标滚动事件
         */
        var wheel = function(event) {
            var delta = 0;
            if (!event) /* For IE. */
                event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta / 120;
            } else if (event.detail) {
                /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail / 3;
            }
            /** If delta is nonzero, handle it.
             * Basically, delta is now positive if wheel was scrolled up,
             * and negative, if wheel was scrolled down.
             */
            if (delta)
                handle(delta);
            /** Prevent default actions caused by mouse wheel.
             * That might be ugly, but we handle scrolls somehow
             * anyway, so don't bother here..
             */
            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
        }

        /** Initialization code.
         * If you use your own event management code, change it as required.
         */
        if (window.addEventListener) {
            /** DOMMouseScroll is for mozilla. */
            window.addEventListener('DOMMouseScroll', wheel, false);
        }
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = wheel;

        /** This is high-level function.
         * It must react to delta being more/less than zero.
         */
        var handle = function(delta) {
            var random_num = Math.floor((Math.random() * 100) + 50);
            if (delta < 0) {
                // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1
                $("btn_next_pic").onclick(random_num);
                return;
            } else {
                // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1
                $("btn_last_pic").onclick(random_num);
                return;
            }
        }

分享到:
评论

相关推荐

    jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip

    本项目"jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip"是利用jQuery实现的一种交互效果,特别是针对鼠标滚动事件的处理,用于创建动态且吸引人的宣传页面。这个压缩包包含了一个基于HTML5、CSS和...

    57、Jquery鼠标滚动事件动画

    本知识点将深入探讨如何利用jQuery实现鼠标滚动事件的动画效果。首先,我们来理解什么是鼠标滚动事件。 鼠标滚动事件是用户操作浏览器时触发的一种事件,通常发生在用户滚动页面时。在jQuery中,我们可以使用`$...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    jQuery鼠标滚动手风琴 jQuery鼠标滚动手风琴代码下载.zip

    jQuery鼠标滚动手风琴 jQuery鼠标滚动手风琴代码下载.zip

    jQuery支持鼠标滚动的时间轴

    本项目“jQuery支持鼠标滚动的时间轴”是利用jQuery的强大功能,结合特定的插件,来实现一个动态的时间轴效果,使得用户可以通过鼠标滚动浏览时间轴上的各个事件。 首先,我们需要引入jQuery库本身,它为我们的页面...

    perfect scrollbar jQuery鼠标滚轮滚动事件

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

    jquery鼠标滚动列表切换代码.zip

    "jQuery鼠标滚动列表切换代码"就是一个典型的应用,它利用jQuery库实现了文字列表在鼠标滚动时进行左右滑动切换的效果。这种效果在新闻网站、产品展示页面等场合非常常见,能够使用户在浏览过程中更加流畅地获取信息...

    jquery鼠标滚轮事件支持插件

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

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    jquery鼠标滚动全屏页面滚动切换效果

    标题 "jquery鼠标滚动全屏页面滚动切换效果" 描述了一个使用jQuery实现的网页交互功能,它使得用户在鼠标滚动时,全屏页面能够平滑地切换内容。这种效果常见于现代网页设计中,用于创建引人入胜的用户体验,尤其适用...

    jQuery鼠标滚动图片.zip

    《jQuery鼠标滚动图片:打造动态视觉盛宴》 在网页设计中,吸引用户的注意力并提供良好的交互体验至关重要。jQuery鼠标滚动图片技术就是一种实现这一目标的有效手段。它将传统的静态图片展示转变为动态的、响应用户...

    jQuery鼠标滚动全屏3D翻转动画切换代码.zip

    三、鼠标滚动事件 在jQuery中,可以使用`$(window).scroll()`函数监听用户的滚动事件。当用户滚动鼠标时,这个函数会被调用,从而触发相应的动画效果。结合CSS3的transform属性,可以控制元素的旋转和平移,实现3D...

    jQuery鼠标滚动隐藏顶部标题.zip

    "jQuery鼠标滚动隐藏顶部标题"是一个巧妙的JS特效,它能够提升网站的视觉效果和交互性。这个特效的核心是利用jQuery库来实现页面滚动时标题的动态隐藏与显示,为用户提供一种更为流畅的浏览体验。 首先,我们来理解...

    鼠标滚动事件动画.zip

    【标题】"鼠标滚动事件动画.zip"所包含的知识点主要集中在JavaScript(JS)与jQuery库的应用上,特别是针对用户交互的响应式设计和动画效果的实现。在这个项目中,开发者利用了jQuery的事件监听和CSS3的动画特性,...

    jQuery鼠标滚动全屏切换预览特效

    《jQuery鼠标滚动全屏切换预览特效》 在网页设计中,吸引用户的注意力并提供流畅的用户体验至关重要。jQuery作为一种强大的JavaScript库,为开发者提供了丰富的工具和功能,使得创建动态、交互性极强的网页效果变得...

    jQuery鼠标滚动缩放效果代码.rar

    3. **鼠标滚动事件**:在事件处理函数中,`event.originalEvent.wheelDelta`或`event.deltaY`可获取滚动的幅度,正负值表示向上/向下滚动。 4. **CSS3变换**:`transform: scale(x)`用于缩放元素,其中`x`是缩放...

    jQuery鼠标滚动页面数字动画特效.zip

    在这个特效中,jQuery负责监听鼠标滚动事件并触发相应的动画。 countup.js是这个特效的核心,它是一个轻量级的JavaScript插件,专门用于生成动态的计数效果。它能够将任何数字从一个值平滑地过渡到另一个值,非常...

    jQuery鼠标滚动全屏切换预览特效.zip

    jQuery鼠标滚动全屏切换预览特效结合了JavaScript库jQuery和fullPage.js插件,实现了通过鼠标滚动来无缝过渡到下一个全屏页面的效果。这种效果可以极大地提升网站的视觉吸引力,同时也增强了用户的交互性。 首先,...

    jQuery鼠标滚动控制全屏页面滚动.zip

    "jQuery鼠标滚动控制全屏页面滚动"是一个利用jQuery和pageswitch插件实现的解决方案,它允许用户通过鼠标滚动来平滑地切换全屏页面内容。下面将详细介绍这个技术及其相关知识点。 首先,jQuery是一个广泛使用的...

Global site tag (gtag.js) - Google Analytics