`

html 5中的鼠标滚动事件

阅读更多
在web中,要是鼠标的滚动轴的事件能利用起来,那是十分好的事情。比如鼠标轮轴滚动时,图片可以自由放大和缩小。
  很多浏览器中,都支持mousewheel事件,并且有wheelDelta 属性,
支持正数的值话向上鼓动,负数的话向下滚动,但可惜firfox中,对这个的规定
是刚好相反的,正数的话向下滚动,负数的向上滚动,并且实现的事件是
DOMMouseScroll。
   下面例子说明下如何用这个事件,比如有一张图:
<img id="myimage" src="myimage.jpg" alt="my image" /> 


var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);


  我们还要纠正firefox这个奇怪的规定,
function MouseWheelHandler(e) {  
       var e = window.event || e; // old IE support  
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";  
    return false;  

 
  这个功能在IE,CHROME下,FIERFOX下都可以了,但SAFRI是不行的 
2
0
分享到:
评论

相关推荐

    鼠标滚动事件动画.zip

    在"鼠标滚动事件动画"中,jQuery被用来绑定鼠标滚动事件,监听用户的滚动行为,并触发相应的动画。 1. **jQuery事件处理**:jQuery提供了一种简便的方式来绑定和触发事件,如`$(selector).scroll(function() {...})...

    HTML5鼠标滚动变成双屏模板

    在"HTML5鼠标滚动变成双屏模板"中,这一技术被巧妙地应用,当用户滚动鼠标时,背景和前景元素以不同的速度移动,给人一种深度和动感的错觉,增强了用户的沉浸感。 双屏显示是模板中的另一大亮点。这种设计通常用于...

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

    总的来说,"jQuery鼠标滚动事件动画"项目展示了如何利用jQuery库与HTML5、CSS和JavaScript协作,创造出具有互动性的滚动动画效果,为宣传页面增加了视觉吸引力。这个项目对于学习和理解前端开发中的动态效果和用户...

    鼠标滑轮滚动事件

    在计算机用户界面中,鼠标滑轮滚动事件是与用户交互密切相关的一个重要元素,尤其在浏览网页、查看文档或者使用各种应用程序时,它提供了方便快捷的浏览方式。本文将深入探讨鼠标滑轮滚动事件的原理、实现机制以及在...

    html5鼠标滚动全屏图片倾斜分割切换特效

    在这个特定的特效中,“html5鼠标滚动全屏图片倾斜分割切换特效”是利用HTML5的特性来实现的一种视觉效果,旨在增强用户体验,特别是在展示产品或摄影作品时。这个特效允许用户在滚动页面时,全屏的图片会以倾斜的...

    鼠标滚动div内容

    在网页设计中,"鼠标滚动div内容"是一种常见的交互效果,它允许用户通过鼠标滚轮在特定的div区域内浏览上下内容。这种效果通常利用JavaScript(JS)实现,以增强用户体验,尤其是在内容丰富的页面中。接下来,我们将...

    HTML5鼠标滚动树生长过程特效.zip

    在这个“HTML5鼠标滚动树生长过程特效”项目中,开发者利用HTML5的特性,结合jQuery和CSS3,创造了一个独特的用户体验:当用户滚动鼠标时,网页上的树木会呈现出生长的动画效果,这种视差滚动技术增强了网页的沉浸感...

    HTML5鼠标滚动海底鱼动画特效.zip

    总的来说,“HTML5鼠标滚动海底鱼动画特效”是一个综合运用HTML5、jQuery、CSS和JavaScript技术的项目,展示了Web开发中的动态效果和交互性。开发者需要对这些技术有深入理解,并能熟练地将它们结合起来,以创造出...

    HTML5鼠标滚动模拟树生长过程代码

    这个“HTML5鼠标滚动模拟树生长过程代码”项目,利用了HTML5的许多特性,如Canvas或者SVG元素,来创建一个动态且引人入胜的视觉效果。在用户滚动页面时,树木会随着滚动的进度逐渐生长,这种效果通常被称为视差滚动...

    Html随鼠标滚动的广告图片

    在本案例中,我们将深入探讨如何实现这一效果,并结合示例5:随鼠标滚动的广告图片来具体说明。 首先,我们需要理解基本的HTML结构。HTML(超文本标记语言)是网页内容的基础,通过各种标签定义不同的元素,如段落...

    html5基于鼠标滚动控制植树生长动画特效源码.zip

    在这个"html5基于鼠标滚动控制植树生长动画特效源码.zip"压缩包中,我们可以看到一个利用HTML5特性的创新应用,即通过用户的鼠标滚动事件来触发并控制树木生长的动画效果。 首先,这个特效的核心是HTML5的Canvas...

    HTML5鼠标滚动模拟树生长过程代码.zip

    在"HTML5鼠标滚动模拟树生长过程代码"中,skrollr.js可能是关键组件,它根据浏览器窗口的滚动位置改变树木的状态,实现了平滑的生长动画效果。 `img`目录可能包含了一些用于背景或者树木细节的图像资源。在HTML5中...

    HTML5鼠标滚动昼夜交替视差特效.zip

    在“HTML5鼠标滚动昼夜交替视差特效”中,jQuery可能被用于绑定滚动事件,获取滚动条位置,然后根据位置改变背景的白天和黑夜状态,以及调整前景元素的样式。 为了实现这个特效,开发者可能首先创建了两个背景图像...

    html5全屏滚动实例 完美实现全屏滚动带动画

    例如,可以监听滚动事件,根据滚动位置切换当前显示的全屏滚动屏。 6. **响应式设计** 现代网页设计必须考虑不同设备和屏幕尺寸的适配。使用媒体查询(`media queries`)进行响应式布局,确保全屏滚动在手机、平板...

    jQuery支持鼠标滚动的时间轴

    3. **鼠标滚动事件处理**:在`scroll`事件被触发时,我们需要获取滚动条的位置信息,如`scrollTop`属性,这将帮助我们确定用户滚动了多少距离。 4. **平滑滚动**:为了提供流畅的用户体验,可以使用`.animate()`...

    js 随鼠标滚动条滚动的div

    在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    在这个JavaScript文件中,我们需要监听鼠标的滚动事件(通常使用`onwheel`或`addEventListener('wheel')`)。当滚轮事件触发时,我们需要获取当前图片的大小,计算出缩放比例,然后更新图片的CSS `transform`属性,...

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

    3. **计算偏移量**:在滚动事件中,我们需要获取滚动条的当前位置,通常可以使用`$(window).scrollTop()`来获取垂直滚动条的位置。如果涉及到水平滚动,可以使用`$(window).scrollLeft()`。 4. **切换效果**:根据...

    js鼠标滚动自动隐藏导航菜单.zip

    在"js鼠标滚动自动隐藏导航菜单"的设计中,主要涉及以下JavaScript知识点: 1. **DOM操作**:DOM(Document Object Model)是HTML和XML文档的结构化表示,JavaScript通过DOM可以访问和修改页面元素。在这个例子中,...

Global site tag (gtag.js) - Google Analytics