jquery 右下j角弹出层
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<title>jqueryQQ</title>
<style type="text/css">
#mymessage
{
right: 0px;
bottom: 0px;
position: absolute;
z-index: 999;
display: none;
background: url( '111.gif' );
}
</style>
<script language="javascript" type="text/javascript">
function ShowMessage(widht,height) {
var TopY=0;//初始化元素距父元素的距离
$("#mymessage").css("width",widht+"px").css("height",height+"px");//设置消息框的大小
$("#mymessage").slideDown(1000);//弹出
$("#message_close").click(function() {//当点击关闭按钮的时候
if(TopY==0){
$("#mymessage").slideUp(1000);//这里之所以用slideUp是为了兼用Firefox浏览器
}
else
{
$("#mymessage").animate({top: TopY+height}, "slow", function() { $("#mymessage").hide(); });//当TopY不等于0时 ie下和Firefox效果一样
}
});
$(window).scroll(function() {
$("#mymessage").css("top", $(window).scrollTop() + $(window).height() - $("#mymessage").height());//当滚动条滚动的时候始终在屏幕的右下角
TopY=$("#mymessage").offset().top;//当滚动条滚动的时候随时设置元素距父原素距离
});
}
$(function(){
ShowMessage(260,190);
})
</script>
</head>
<body>
<div id="mymessage">
<div id="mes_close" style="text-align: right; padding-right: 8px; padding-top: 5px;">
<a id="message_close" title="点击关闭" href="javascript:void(0);">关闭</a></div>
<div style="padding-top: 25px; padding-left: 15px">
<a href="">xxxx</a><br />
<a href="">zzz</a><br />
<a href="">yyy</a><br />
</div>
</div>
<!--#mymessage-->
</body>
</html>
