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