文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> Mousewheel事件:鼠标滚轮放大页面字体

Mousewheel事件:鼠标滚轮放大页面字体


作者: 佚名 来源:网络 浏览:7 日期:2011-6-23 19:31:50

网页制作Webjx文章简介:鼠标滚轮放大页面字体事件Mousewheel .

当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。

OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下:

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    // isFirefox 是伪代码,大家可以自行实现
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 也是伪代码,你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    event = window.event || event;
    // todo something
}, false);

我们再回到要实现的交互效果上,现在还有其他一些问题需要来解决:

  1. 页面字体到底是放大还是缩小呢? ==> 鼠标滚轮是向上滚动还是向下滚动呢?
  2. 页面字体缩放的倍数到底是多少呢? ==> 鼠标滚轮滚动的幅度大小是多少呢?

还好,我们可以通过 event 的某些属性值得到这些信息:

  1. mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为 120 的倍数,即:幅度大小 = 返回的值 / 120。
  2. DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。
  3. mousewheel” 事件在 Opera 10+ 中却是个特例,既有 “event.wheelDelta” 属性,也有 “event.detail” 属性。

注:上面第三点,在《The onmousewheel event of javascript》一文中有这样一段批注:

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE’s.

但经测试, Opera 9+Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致,未发现异常与错误,从接口角度来说,代码中应优先使用 “event.wheelDelta” 属性。

此时代码如下:

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    stopEvent: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    zoomIn = function(){},
    zoomOut = function(){},
    // isFirefox 是伪代码,大家可以自行实现
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 是伪代码,你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    var delta = 0;
    event = window.event || event;
    stopEvent(event);
    delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
    // zoomIn, zoomOut 是伪代码,需要实现的缩放事件
    delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
} , false);

事件和事件属性的测试案例:http://www.planabc.net/demo/event/mousewheel.html

扩展阅读:《Mouse wheel programming in javascript


上一篇:集中数据格式:JSON和JSONP 下一篇:动态网站导航菜单:javascript和jQuery导航菜单教程
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

javascr..

Sub-Pixel P..

Web设计师的路:自学..

javascr..

WEBJX资源分享:2..

出色的jQuery导航..

Jetpack扩展案例..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号