常用的js函数
/** * 隐藏元素 * @param {String} elem */ function hide(elem){ var curDisplay = getStyle(elem, 'display'); if(curDisplay != 'none'){ elem.oldDisplay = curDisplay; } elem.style.display = 'none'; } /** * 显示元素 * @param {String} elem */ function show(elem){ elem.style.display = elem.oldDisply || 'block'; } /** * 设置透明度 * @param {Object} elem * @param {Object} level (0-100) */ function setOpacity(elem, level){ if(elem.filters){ //如果是IE elem.style.filter = 'alpha(opacity=' + level + ')'; //必须设置zoom,要不然透明度在IE下不生效 From:http://blog.csdn.net/dxx1988/article/details/6581430 elem.style.zoom = 1; } else { //否则是W3C elem.style.opacity = level / 100; } } /** * 滑动 * @param {Object} elem */ function slideDown(elem){ //elem.style.height = '0px'; show(elem); var h = fullHeight(elem); for(var i=0; i<=100; i+=5){ (function(){ var pos = i; setTimeout(function(){ elem.style.height = (pos/100) * h + 'px'; }, (pos + 1) * 5); })(); } } //slideDown($('pText')); //alert(fullHeight($('pText'))); /** * 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/ * @param {Object} elem * @param {Number} speed 淡入速度,正整数(可选) * @param {Number} opacity 淡入到指定的透明度,0~100(可选) */ function fadeInThink(elem, speed, opacity){ speed = speed || 20; opacity = opacity || 100; show(elem); setOpacity(elem, 0); //初始化透明度变化值为0 var val = 0; //循环将透明值以5递增,即淡入效果 (function(){ setOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } /** * 透明度渐显 * @param {Object} elem */ function fadeIn(elem){ //setOpacity(emel, 0); show(elem); for(var i=0; i<=100; i+=10){ (function(){ var pos = i; setTimeout(function(){ setOpacity(elem, pos); }, (pos + 1) * 10); })(); } } /** * 透明度渐隐 From: http://mrthink.net/js-fadein-fadeout-fadeto/ * @param {Object} elem */ function fadeOut(elem){ var val = 100; (function(){ setOpacity(elem, val); val -= 5; if(val >= 0){ setTimeout(arguments.callee, 50); } else if(val < 0){ hide(elem); } })(); } //fadeInThink($('pText')); /** * 光标的水平位置 * @param {Object} e */ function getX(e){ e = e || window.event; return e.pageX || e.clientX + document.body.scrollLeft; } /** * 光标的垂直位置 * @param {Object} e */ function getY(e){ e = e || window.event; return e.pageY || e.clientY + document.body.scrollTop; } /** * 获得鼠标相对于当前元素的X位置 * @param {Object} e */ function getElementX(e){ return (e && e.layerX) || window.event.offsetX; } /** * 获得鼠标相对于当前元素的Y位置 * @param {Object} e */ function getElementY(e){ return (e && e.layerY) || window.event.offsetY; } /** * 当前页面的高度 */ function pageHeight(){ return document.body.scrollHeight; } /** * 当前页面的宽度 */ function pageWidth(){ return document.body.scrollWidth; } //alert(pageHeight()); /** * 视口的高度 */ function windowHeight(){ var de = document.documentElement; return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight; } /** * 视口的高度 */ function windowWidth(){ var de = document.documentElement; return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth; } /** * 浏览器水平滚动位置 */ function scrollX(){ var de = document.documentElement; return self.pageOffsetset || (de && de.scrollLeft) || document.body.scrollLeft; } /** * 浏览器垂直滚动位置 */ function scrollY(){ var de = document.documentElement; return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop; }