`
lwp11411
  • 浏览: 22039 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript控制鼠标中键滑动

阅读更多

MouseWheel.js的代码如下:

var MouseWheel_Count=0;
function MouseWheel$handle(delta){
    MouseWheel_Count++;
    if(MouseWheel_Count>1)   return;
    if (delta < 0) //小于0向下滚动,大于0向上滚动
       //        alert("向下滚动");
    else 
       //        alert("向上滚动");
    setTimeout("MouseWheel$CountMinus();",500);
}
  
function MouseWheel$CountMinus()
{
    MouseWheel_Count=0;
}
  
/** 事件句柄
 */
function MouseWheel$wheel(event){
    var delta = 0;
    if (!event) /* For IE. */ 
        event = window.event;
    if (event.wheelDelta) { /* IE或者Opera. */
            delta = event.wheelDelta/120;
//        delta = event.wheelDelta;
        /** 在Opera9中,事件处理不同于IE
         */
        if (window.opera) 
            delta = -delta;
    }
    else 
        if (event.detail) { /** 兼容Mozilla. */
            /** In Mozilla, sign of delta is different than in IE.
         * Also, delta is multiple of 3.
         */
            delta = -event.detail / 3;
        }
    /** 如果 增量不等于0则触发
     * 主要功能为测试滚轮向上滚或者是向下
     */
    if (delta) 
        MouseWheel$handle(delta);
}

 

前台调用:

script type="text/javascript">
    /**author:李伟鹏 date:2011-05-11
    **鼠标中键滑动控制地图缩放
    **/
    /** 初始化 */
    if (window.addEventListener)
    /** Mozilla的基于DOM的滚轮事件 **/
        window.addEventListener('DOMMouseScroll', MouseWheel$wheel, false);
    /** IE/Opera. */
    window.onmousewheel = document.onmousewheel = MouseWheel$wheel;
</script>

 

分享到:
评论

相关推荐

    鼠标滚轮控制左右滑动

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

    javascript控制页面滑动门

    在"javascript控制页面滑动门"的实现中,主要涉及以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML元素。要实现滑动门效果,首先需要获取到需要滑动的页面分块,这通常...

    动画效果随鼠标向下滑动而加载

    首先,我们需要理解的是鼠标滑动事件。在JavaScript或jQuery等库中,可以通过监听`scroll`事件来捕捉用户的鼠标滚动行为。当用户将鼠标向下滚动时,浏览器会触发这个事件,开发者可以在此事件的回调函数中添加相应的...

    购物网JavaScript横长形图片滚动滑动门

    在此场景中,JavaScript用于控制图片的显示和隐藏,以及动画效果的实现。 2. **DOM操作**:在JavaScript中,Document Object Model (DOM) 是HTML和XML文档的结构化表示,可以被JavaScript访问和修改。通过DOM,我们...

    基于原生JavaScript完成的网页端2048游戏,适配移动端,绑定键盘和鼠标滑动事件.zip

    无论是使用方向键还是通过鼠标滑动,玩家都能轻松控制游戏中的方块移动,享受游戏带来的乐趣。 此外,该项目还注重用户体验和界面设计。游戏界面简洁明了,操作提示清晰易懂,让玩家能够快速上手并沉浸在游戏中。...

    jQuery鼠标滚轮控制页面滑动代码.zip

    本案例中的"jQuery鼠标滚轮控制页面滑动代码"是一个常见的网页交互功能,它允许用户通过鼠标的滚轮来控制网页内容的上下滚动,提高了用户体验。这个功能尤其对长页面设计来说非常实用,因为用户无需频繁移动鼠标到...

    鼠标点击滑动特效

    - `js`:这个文件夹可能包含JavaScript代码,用于处理鼠标的点击事件,监听鼠标的移动,并控制背景图片的滑动。 - `css`:这个文件夹可能包含了CSS样式文件,用于定义网页的布局、元素样式以及可能的动画效果,比如...

    js javascript 图片滑动新闻展示,鼠标控制图片左右滚动【转】

    在本案例中,“js javascript 图片滑动新闻展示,鼠标控制图片左右滚动”是一个使用JavaScript实现的动态图片展示功能,它允许用户通过鼠标操作来控制图片的左右滚动,为网站增添生动性和用户体验。 首先,我们要...

    CSS3鼠标悬停按钮滑动特效

    通过定义关键帧(@keyframes),我们可以控制元素在整个动画过程中的每个阶段的样式,这样在鼠标悬停时,按钮不仅可以改变颜色,还可以滑动、旋转或者缩放,增加视觉吸引力。 在实际应用中,这些CSS3特效通常会结合...

    javaScript 图片滑动效果 代码

    一个简单的图片滑动组件通常包括一个包含多张图片的容器和一些控制按钮(如左右箭头)。例如: ```html &lt;!-- 更多图片... --&gt; &lt;button class="prev"&gt;Previous &lt;button class="next"&gt;Next ``` CSS可以...

    鼠标滑动文字显示效果

    在网页设计和用户体验优化中,"鼠标滑动文字显示效果"是一种常见的交互设计技术,它增强了用户与网页内容的互动性。这种效果通常应用于图片、按钮或其他元素,当用户将鼠标光标移动到这些元素上时,会显示出额外的...

    VANCL凡客图片上下滑动javascript代码

    首先,可以通过CSS将所有图片设置为初始状态为隐藏,然后在JavaScript中创建事件监听器,比如鼠标滚轮事件(`onwheel`),当用户滚动鼠标时触发相应的函数。在该函数内,我们根据滚动的方向计算出图片应该移动的距离...

    Swiper插件纯javascript打造的滑动特效插件

    7. **API控制**:提供了丰富的JavaScript API接口,可以方便地进行初始化、手动切换、暂停/恢复播放等操作。 8. **键盘和鼠标支持**:不仅限于触屏设备,Swiper也支持键盘和鼠标操作,使得桌面端用户也能享受良好的...

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

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

    jQuery鼠标悬停手风琴滑动切换特效

    在本文中,我们将深入探讨jQuery实现的鼠标悬停手风琴滑动切换特效,这是一个常见的前端交互设计,常用于导航菜单、内容展示等场景。这种特效可以为网站增添动态感,提升用户体验。让我们一起深入了解其背后的原理和...

    jquery鼠标悬停滑动切换特效

    在网页设计和开发中,jQuery...要实现"鼠标悬停滑动切换特效",首先需要在页面中引入jQuery库。这通常通过在HTML文件的`&lt;head&gt;`部分添加一个链接到jQuery CDN(内容分发网络)的`&lt;script&gt;`标签来完成。例如: ```html ...

    JavaScript图片滑动切换效果

    1. **事件监听**:JavaScript可以通过`addEventListener`函数监听用户的点击、鼠标滑动等操作,当这些事件发生时,执行相应的回调函数。 2. **数组存储**:图片的URL可以被存储在一个数组中,方便进行遍历和操作。...

Global site tag (gtag.js) - Google Analytics