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

  • 相关阅读:
    更改修改VS Visual Studio debug默认调试浏览器
    网页特效:随浏览器滚动条移动的DIV层
    IIS7,WINDOWS2008运行.net2.0等版本程序出现这个错误。
    项目所需的应用程序未安装,确保已安装项目类型(.csproj)的应用程序的解决办法[转]
    C#WINFORM控件之ComboBox
    页面编码和js文件不同导致的IE6下脚本错误
    程序越写越难控制。
    .net页面事件顺序
    未能加载文件或程序集
    # ACwing 902最短编辑距离 (线性dp)
  • 原文地址:https://www.cnblogs.com/localwz/p/4521594.html
Copyright © 2011-2022 走看看