zoukankan      html  css  js  c++  java
  • 使控件悬浮在页面上不随滚动条变化的JQUERY插件

      实现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啦。

  • 相关阅读:
    数据结构之单链表的实现java
    从尾到头打印列表——牛客剑指offer
    Java重要类之LinkedList
    删除链表中重复的结点——牛客剑指offer
    二维数组中的查找——牛客剑指offer
    爬虫常见异常
    持续集成常见异常及排除方案
    VMware安装与基本使用
    web开发常见异常及处理
    Linux简单介绍与基本使用(微系统,)
  • 原文地址:https://www.cnblogs.com/localwz/p/4521594.html
Copyright © 2011-2022 走看看