Jquery 插件 实现浮动层 网页右下弹出层
最近由于公司项目原因要添加一个在网站首页的浮动的弹出层，且比较急，上网大概查找了一下，无奈只能自己动手写了一个。比较简单。
源码如下：
(function ($) {
$.fn.Messager = function (option) {
option = $.extend({}, $.fn.option, option);//JQuery插件开发常用的，合并默认参数与用户给定的参数
var thisp = this;
$(thisp).css({ width: option.width, height: option.height, position: "absolute" });
switch (option.animate) {
case "fade": fade(); break;
case "slide": slide(); break;
}
if (option.isScroll) {
$(window).scroll(function () {
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: $(window).scrollLeft() + left($(window).width() - $("html").width()) });
});
}
if (option.isResize) {
$(window).resize(function () {
var cha = $(window).width() - $("html").width();
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: left(cha) });
});
}
function fade() {
$(thisp).css("display", "none");
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: left($(window).width() - $("html").width()) });
$(thisp).fadeIn(option.speed);
$("#" + option.closeTO).click(function () {
$(thisp).fadeOut(option.speed);
});
}
function slide() {
$(thisp).css("display", "block");
$(thisp).css({ top: $(window).scrollTop() + $(window).height(), left: left($(window).width() - $("html").width()) });
$(thisp).animate({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom }, 1000)
$("#" + option.closeTO).click(function () {
$(thisp).animate({ top: $(window).scrollTop() + $(window).height() }, 1000, function () {
$(this).hide();
})
});
}
function left(cha) {
if (cha > 0) {
return $("html").width() - option.width - option.marginRight;
}
else {
return $(window).width() - option.width - option.marginRight
}
}
};
$.fn.option = {
width: 100,/*弹出层的宽度*/
height: 100,/*弹出层的高度*/
speed: 1000, /*弹出层的动画的速度*/
closeTO: "message_close", /*弹出层的关闭元素的ID*/
animate: "fade",/*动画效果 fade,slide*/
marginRight: 0,/*右边距*/
marginBottom: 0,/*下边距*/
isScroll: true,/*是否绑定滚动条事件*/
isResize: true /*是否绑定窗口resize事件*/
};
})(jQuery);
$.fn.Messager = function (option) {
option = $.extend({}, $.fn.option, option);//JQuery插件开发常用的，合并默认参数与用户给定的参数
var thisp = this;
$(thisp).css({ width: option.width, height: option.height, position: "absolute" });
switch (option.animate) {
case "fade": fade(); break;
case "slide": slide(); break;
}
if (option.isScroll) {
$(window).scroll(function () {
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: $(window).scrollLeft() + left($(window).width() - $("html").width()) });
});
}
if (option.isResize) {
$(window).resize(function () {
var cha = $(window).width() - $("html").width();
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: left(cha) });
});
}
function fade() {
$(thisp).css("display", "none");
$(thisp).css({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom, left: left($(window).width() - $("html").width()) });
$(thisp).fadeIn(option.speed);
$("#" + option.closeTO).click(function () {
$(thisp).fadeOut(option.speed);
});
}
function slide() {
$(thisp).css("display", "block");
$(thisp).css({ top: $(window).scrollTop() + $(window).height(), left: left($(window).width() - $("html").width()) });
$(thisp).animate({ top: $(window).scrollTop() + $(window).height() - option.height - option.marginBottom }, 1000)
$("#" + option.closeTO).click(function () {
$(thisp).animate({ top: $(window).scrollTop() + $(window).height() }, 1000, function () {
$(this).hide();
})
});
}
function left(cha) {
if (cha > 0) {
return $("html").width() - option.width - option.marginRight;
}
else {
return $(window).width() - option.width - option.marginRight
}
}
};
$.fn.option = {
width: 100,/*弹出层的宽度*/
height: 100,/*弹出层的高度*/
speed: 1000, /*弹出层的动画的速度*/
closeTO: "message_close", /*弹出层的关闭元素的ID*/
animate: "fade",/*动画效果 fade,slide*/
marginRight: 0,/*右边距*/
marginBottom: 0,/*下边距*/
isScroll: true,/*是否绑定滚动条事件*/
isResize: true /*是否绑定窗口resize事件*/
};
})(jQuery);
使用方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-message.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#message").Messager({
closeTO: "message_close",
animate: "slide",
marginRight: 10,
width: 435,
height: 211,
isScroll: true,
isResize: true
});
});
</script>
</head>
<body style="width:1200px;">
<form id="form1" runat="server">
<div style="height: 800px; background-color: red; width: 100px;">
</div>
<div id="message" style="background-color: blue; overflow: hidden;">
<div id="messageTool">
<span id="message_close"></span>
</div>
<div id="message_content">
</div>
</div>
</form>
</body>
</html>
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-message.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#message").Messager({
closeTO: "message_close",
animate: "slide",
marginRight: 10,
width: 435,
height: 211,
isScroll: true,
isResize: true
});
});
</script>
</head>
<body style="width:1200px;">
<form id="form1" runat="server">
<div style="height: 800px; background-color: red; width: 100px;">
</div>
<div id="message" style="background-color: blue; overflow: hidden;">
<div id="messageTool">
<span id="message_close"></span>
</div>
<div id="message_content">
</div>
</div>
</form>
</body>
</html>
