标签:
实现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啦。
标签:
原文地址:http://www.cnblogs.com/localwz/p/4521594.html