• 非常好的一个JS代码(RelativePosition.js)


    var RelativePosition = function(){
        function getLeft( align, rect, rel ){
            var iLeft = 0;
            switch (align.toLowerCase()) {
                case "left" :
                    return rect.left - rel.offsetWidth;
                case "clientleft" :
                    return rect.left;
                case "center" :
                    return ( rect.left + rect.right - rel.offsetWidth ) / 2;
                case "clientright" :
                    return rect.right - rel.offsetWidth;
                case "right" :
                default :
                    return rect.right;
            };
        };
        function getTop( valign, rect, rel ){
            var iTop = 0;
            switch (valign.toLowerCase()) {
                case "top" :
                    return rect.top - rel.offsetHeight;
                case "clienttop" :
                    return rect.top;
                case "center" :
                    return ( rect.top + rect.bottom - rel.offsetHeight ) / 2;
                case "clientbottom" :
                    return rect.bottom - rel.offsetHeight;
                case "bottom" :
                default :
                    return rect.bottom;
            };
        };
        //定位元素 相对定位元素
        return function ( fix, rel, options ) {
            //默认值
            var opt = $$.extend({
                align:            "clientleft",//水平方向定位
                vAlign:            "clienttop",//垂直方向定位
                customLeft:        0,//自定义left定位
                customTop:        0,//自定义top定位
                percentLeft:    0,//自定义left百分比定位
                percentTop:        0,//自定义top百分比定位
                adaptive:        false,//是否自适应定位
                reset:            false//自适应定位时是否重新定位
            }, options || {});
            //定义参数
            var rect = $$D.clientRect(fix)
                ,iLeft = getLeft(opt.align, rect, rel) + opt.customLeft
                ,iTop = getTop(opt.vAlign, rect, rel) + opt.customTop;
            //自定义百分比定位
            if (opt.percentLeft) { iLeft += .01 * opt.percentLeft * fix.offsetWidth; };
            if (opt.percentTop) { iTop += .01 * opt.percentTop * fix.offsetHeight; };
            //自适应视窗定位
            if (opt.adaptive) {
                //修正定位参数
                var doc = fix.ownerDocument
                    ,maxLeft = doc.clientWidth - rel.offsetWidth
                    ,maxTop = doc.clientHeight - rel.offsetHeight;
                if (opt.reset) {
                    //自动重新定位
                    if (iLeft > maxLeft || iLeft < 0) {
                        iLeft = getLeft(2 * iLeft > maxLeft ? "left" : "right", rect, rel) + opt.customLeft;
                    };
                    if (iTop > maxTop || iTop < 0) {
                        iTop = getTop(2 * iTop > maxTop ? "top" : "bottom", rect, rel) + opt.customTop;
                    };
                } else {
                    //修正到适合位置
                    iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
                    iTop = Math.max(Math.min(iTop, maxTop), 0);
                };
            };
            //加上滚动条
            iLeft += $$D.getScrollLeft(fix); iTop += $$D.getScrollTop(fix);
            //返回定位参数
            return { Left: iLeft, Top: iTop };
        };
    }();

    原文来自:

    http://www.cnblogs.com/cloudgamer/archive/2009/10/29/Cloudgamer_JavaScript_Library.html

    http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html

  • 相关阅读:
    安装包报错2503解决方法
    js中return;、return true、return false;区别
    图片添加border 不占用图片的大小
    效果网址http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html
    兼容ie8 rgba()用法
    html使用css让文字多行超出部分用省略号三个点显示的方法案例
    MyCat02--MyCat入门无ZK实践
    MyCat01--基础
    MySQL/MariaDB导入(load data infile)导出(select into outfile)
    MariaDB/Mysql临时表
  • 原文地址:https://www.cnblogs.com/wzq806341010/p/3142486.html
Copyright © 2020-2023  润新知