Mousewheel事件:鼠标滚轮放大页面字体
作者 佚名技术
来源 网页制作
浏览
发布时间 2012-03-06
我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：
还好，我们可以通过 event 的某些属性值得到这些信息：
注：上面第三点，在《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.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于Mousewheel事件:鼠标滚轮放大页面字体的所有评论
