• 常用的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;
    }
    

      

  • 相关阅读:
    调用序号
    图片经过时悬停动画
    左侧楼层导航
    dede如何实现二级栏目导航的仿制
    列表页调取二级栏目
    jquery 点击空白处隐藏div元素
    加入收藏功能
    31通过属性名获得属性值
    29.模板式邮箱验证
    28.九九乘法表
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4060028.html
Copyright © 2020-2023  润新知