企业网站制作——鼠标滚轮放大页面字体
点击次数:更新时间:2011-07-26 11:07:10【打印】【关闭】
在企业网站中都会用到一些效果提高用户体验，下面介绍个放大字体效果 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时，会用到 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); 我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：
还好，我们可以通过 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.planabc.net/demo/event/mousewheel.html |