码迷,mamicode.com
首页 > Web开发 > 详细

使控件悬浮在页面上不随滚动条变化的JQUERY插件

时间:2015-05-22 11:17:22      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

  实现HTML控件始终可以悬浮在页面上,当滚动条上下滚动超过荧屏时,控件显示在顶端,不会被隐藏。可以拖动控件,拖动后控件会一直悬停在当前位置,不会随滚动条变动。参考了网上写法,原创。

     上代码:

//功能:实现HTML控件始终可以悬浮在页面上,当滚动条上下滚动超过荧屏时,控件显示在顶端,不会被隐藏
//       可以拖动控件。拖动后控件会一直悬停在当前位置,不会随滚动条变动。WUZHU
//参数:top:初始状态时控件离顶端距离。
//      left:初始状态时控件离左端距离。
//      ismove:是否可拖动控件,默认为true。
//引用:需引用本插件文件,当然还有必须的JQUERY。
//例子:
//          $("#back").floatdiv({
//             top:6,
//             left:250,
//             ismove: false
//            });
//备注:未全方面测试过。
(function ($) {
    var floatObj = {};
    floatObj.x = 0;
    floatObj.y = 0;
    floatObj.move = false;
    var Method = {
        init: function (options) {
            return this.each(function () {
                var $this = $(this);
                var settings = $this.data("FloatDiv");
                if (typeof settings === "undefined") {
                    //默认配置
                    var defaults = {
                        top: 800,
                        left: 200,
                        ismove: true
                    };
                    settings = $.extend({}, defaults, options[0]);
                    $this.data("FloatDiv", settings);
                } else {
                    settings = $.extend({}, settings, options[0]);
                }
                $this.css({ ‘top‘: settings.top, ‘left‘: settings.left, ‘position‘: ‘absolute‘, "z-index": "999" });
                if (settings.ismove) {
                    $this.css({ cursor: ‘move‘ });
                    $this.bind("mousedown", function (e) {
                        floatObj.move = true;
                        floatObj.x = e.pageX - parseInt($this.css("left"));
                        floatObj.y = e.pageY - parseInt($this.css("top"));
                        $this.setCapture && $this.setCapture();
                        return false;
                    });
                    $(document).bind("mouseup", function (e) {
                        floatObj.move = false;
                        $this.fadeTo("fast", 1);
                        if ($this[0].releaseCapture != undefined)
                            $this[0].releaseCapture();
                        e.cancelBubble = true;
                    });
                    $(document).bind("mousemove", function (e) {
                        if (floatObj.move) {
                            var e = e || window.event;
                            var _x = e.pageX - floatObj.x;
                            var _y = e.pageY - floatObj.y;
                            $this.fadeTo(20, 0.25);
                            $this.css({ top: _y, left: _x });
                            return false;
                        }
                    });
                }
                $(window).bind("scroll", function () {
                    var stickyTop = $this.offset().top;
                    var stickyLeft = $this.offset().left;
                    var scrollTop = $(window).scrollTop();
                    if (scrollTop > stickyTop) {
                        $this.css({ ‘top‘: ‘0‘, ‘position‘: ‘fixed‘, ‘left‘: stickyLeft }).addClass(‘fxd‘);
                    }
                    else {
                        //  $this.css({ ‘top‘: stickyTop, ‘position‘: ‘absolute‘, ‘left‘: stickyLeft }).removeClass(‘fxd‘);
                    }

                    return false;
                });
                return this;
            });
        }
    };

    $.fn.floatdiv = function () {
        var m = arguments[0];
        if (Method[m]) {
            m = Method[m];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if (typeof m === "object" || !m) {
            m = Method.init;
        } else {
            $.error("方法" + m + "不存在");
            return this;
        }
        return m.call(this, arguments);
    }

})(jQuery)

  OK啦。

使控件悬浮在页面上不随滚动条变化的JQUERY插件

标签:

原文地址:http://www.cnblogs.com/localwz/p/4521594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!