一个jquery的浮动框，扩展性比较好吧

时间：2010-08-26 来源：toven

在用Maxthon的时候无意看到一个浮动框，把它改成基于jquery的，扩展性比较好，发来分享下。

<!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></title>
<style type="text/css">
body
{
    
}

.float_mx{
        background:#CCC;
        width:100px;
        
        display:none;
}
</style>
</head>

<body>
<div class="float_mx">
在此添加内容
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
    $.fn.scrollBox = function(options){
        var defaultOptions = {
            speed: 0.1, //加速
            time: 16,   //移动速度
            top: 200,   //默认顶部
            align: 'right', //浮动位置，可选左、右
            mix: 0          //边距
        };
        
        var options = $.extend(defaultOptions, options);

        this.each(function(){
            var obj = $(this);
            init();
            
            function init(){
                obj.css('display', 'block');
                obj.css('position', 'absolute');
                obj.css(options.align, options.mix);
                obj.css('top', options.top+'px');
                obj.css('z-index', '99');
                
                move();
            }

            function back() {
                    acceleration = options.speed;
                    time = options.time;
                    var x1 = 0;
                    var y1 = 0;
                    var x2 = 0;
                    var y2 = 0;
                    if (document.documentElement) {
                            x1 = document.documentElement.scrollLeft || 0;
                            y1 = document.documentElement.scrollTop || 0;
                    }
                    if (document.body) {
                            x2 = document.body.scrollLeft || 0;
                            y2 = document.body.scrollTop || 0;
                    }
                    var x = Math.max(x1, x2);
                    var y = Math.max(y1, y2);
                    var speed = acceleration;
                    return {
                            l: x,
                            t: y,
                            s: speed
                    };
                };
            
            function move(){
                var tip = obj;
                var old = options.top;
                var pos = back().t;

                pos = pos - $(tip).Coordinate().y + options.top;
                pos = $(tip).Coordinate().y + pos / 10;
                if (pos < options.top) {
                    pos = options.top;
                }
                if (pos != old) {
                    tip.css('top',pos + "px");
                }
                old = pos;
                window.setTimeout(function(){move();}, options.time);
            };
        });
    };

    $.fn.Coordinate = function(){
        var E = $(this)[0];
                var C = E.offsetTop;
                var B = E.offsetLeft;
                var A = E.offsetWidth;
                var D = E.offsetHeight;
                while (E = E.offsetParent) {
                        C += E.offsetTop;
                        B += E.offsetLeft;

                }
                return {
                        x: B,
                        y: C,
                        w: A,
                        h: D
                };
    };
})(jQuery);

$('.float_mx').scrollBox();
</script>
</body>
</html>

把下面这段代理放到单独的js文件中，代码中的css代码可以删掉，display设为none，是为了避免在页面未加载完，显示不正确的问题。

(function($) {
    $.fn.scrollBox = function(options){
        var defaultOptions = {
            speed: 0.1, //加速
            time: 16,   //移动速度
            top: 200,   //默认顶部
            align: 'right', //浮动位置，可选左、右
            mix: 0          //边距
        };
        
        var options = $.extend(defaultOptions, options);

        this.each(function(){
            var obj = $(this);
            init();
            
            function init(){
                obj.css('display', 'block');
                obj.css('position', 'absolute');
                obj.css(options.align, options.mix);
                obj.css('top', options.top+'px');
                obj.css('z-index', '99');
                
                move();
            }

            function back() {
                    acceleration = options.speed;
                    time = options.time;
                    var x1 = 0;
                    var y1 = 0;
                    var x2 = 0;
                    var y2 = 0;
                    if (document.documentElement) {
                            x1 = document.documentElement.scrollLeft || 0;
                            y1 = document.documentElement.scrollTop || 0;
                    }
                    if (document.body) {
                            x2 = document.body.scrollLeft || 0;
                            y2 = document.body.scrollTop || 0;
                    }
                    var x = Math.max(x1, x2);
                    var y = Math.max(y1, y2);
                    var speed = acceleration;
                    return {
                            l: x,
                            t: y,
                            s: speed
                    };
                };
            
            function move(){
                var tip = obj;
                var old = options.top;
                var pos = back().t;

                pos = pos - $(tip).Coordinate().y + options.top;
                pos = $(tip).Coordinate().y + pos / 10;
                if (pos < options.top) {
                    pos = options.top;
                }
                if (pos != old) {
                    tip.css('top',pos + "px");
                }
                old = pos;
                window.setTimeout(function(){move();}, options.time);
            };
        });
    };

    $.fn.Coordinate = function(){
        var E = $(this)[0];
                var C = E.offsetTop;
                var B = E.offsetLeft;
                var A = E.offsetWidth;
                var D = E.offsetHeight;
                while (E = E.offsetParent) {
                        C += E.offsetTop;
                        B += E.offsetLeft;

                }
                return {
                        x: B,
                        y: C,
                        w: A,
                        h: D
                };
    };
})(jQuery);