类QQ右下角弹出消息对话框(jQuery插件)
类QQ右下角弹出消息对话框(jQuery插件)
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>类QQ右下角弹出消息对话框</title>
<script type="text/javascript" src="style/jquery.js"></script>
<script type="text/javascript" src="style/MessageDialogQQ.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#message").Show(256,185);
});
</script>
</head>
<body>
<a href="http://www.0379zd.com">www.0379zd.com整理</a>
<div id="message" style="z-index: 100; position: absolute; display: none; bottom: 0;right: 0; overflow: hidden;">
<div id="backimage"><img src="style/tips_bg.jpg" alt="" /></div>
<div style="width: 100%; height: 25px; overflow: hidden;" id="messageTool">
<div style="padding: 3px 0 0 35px; width: 100px; line-height: 20px; text-align: center;overflow: hidden; position: absolute;" id="msgtitle">
</div>
<span id="message_close" style="right: 10px; width: 16px; text-align: center; cursor: pointer;position: absolute;"></span>
<div style="clear: both;">
</div>
</div>
<div id="message_content" style="margin: 0 5px 0 5px; padding: 10px 0 10px 5px; width: 239px;height: 135px; text-align: left; overflow: hidden;">
内容
</div>
</div>
</body>
</html>
Code(function($) {
$.fn.extend({
Show: function(widht,height) {
var TopY=0;//初始化元素距父元素的距离
$(this).css("width",widht+"px").css("height",height+"px");//设置消息框的大小
$(this).slideDown(1000);//弹出
$("#messageTool").css("margin-top",-height);//为内容部分创建高度 溢出
$("#message_close").click(function() {//当点击关闭按钮的时候
if(TopY==0)
{
$("#message").slideUp(1000);//这里之所以用slideUp是为了兼用Firefox浏览器
}
else
{
$("#message").animate({top: TopY+height}, "slow", function() { $("#message").hide(); });//当TopY不等于0时 ie下和Firefox效果一样
}
});
$(window).scroll(function() {
$("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height());//当滚动条滚动的时候始终在屏幕的右下角
TopY=$("#message").offset().top;//当滚动条滚动的时候随时设置元素距父原素距离
});
}
})}
)
/************************************************/
本博客内容如果是原著都会在标题后加上(原著)字样,未加者多数为转载.
/************************************************/
