mousewheel

/*********************************************

 * @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>



你可能感兴趣的:(mousewheel)