/*********************************************
* @author sky
*********************************************/
function addEvent(el,type,fn,capture){
if(el.addEventListener){
el.addEventListener(type,fn,capture);
}else if(el.attachEvent){
el.attachEvent('on'+type,function(){
fn.call(el,window.event);
})
}else{
el['on'+type] = fn;
}
}
function getId(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
var test = getId('test'),isFirefox = browser();
var mousewheel = isFirefox ? 'DOMMouseScroll' : 'mousewheel';
addEvent(test,mousewheel,function(e){
e = e || window.event;
var delta = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;
stopEvent(e);
delta > 0 ? zoom(1) : zoom(-1);
})
function zoom(n){
var font_size = parseInt(test.style.fontSize) || 12;
test.style.fontSize = font_size + n + 'px';
}
function stopEvent(e){
if(!e.stopPropagation){
e.stopPropagation = function(){
e.cancelBubble = true;
}
e.preventDefault = function(){
e.returnValue = false;
}
}
e.stopPropagation();
e.preventDefault();
}
function browser(){
var x = navigator.userAgent.toLowerCase()
return /firefox/.test(x) ? 'firefox': false;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>project index</title>
<style type="text/css">
#test { background:#333; color:#fff; padding:10px; margin:100px auto; line-height:2; font-size:12px;}
</style>
</head>
<body>
<div id="test">这样可以使JavaScript代码更精简些。当然，可读性稍差一些，就看你是重视效率还是重视可维护性了。
使用不同特征来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。
通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是，我们可以写出下面的代码：</div>
<script type="text/javascript" src="mouseWheel.js"></script>
</body>
</html>