最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理，整体上给你的感觉还是太丑，今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下：
代码如下：
<!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" /> ???????<title>jQuery实现网页右下角悬浮层提示</title> ???????<style type="text/css"> ???????????*{margin:0;padding:0;list-style-type:none;} ???????????a,img{border:0;} ???????????body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} ???????????/* pop */ ???????????#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;} ???????????#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;} ???????????#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} ???????????#popHead #popClose{position:absolute;right:10px;top:1px;} ???????????#popHead a#popClose:hover{color:#f00;cursor:pointer;} ???????????#popContent{padding:5px 10px;} ???????????#popTitle a{line-height:24px;font-size:14px;font-family:‘微软雅黑‘;color:#333;font-weight:bold;text-decoration:none;} ???????????#popTitle a:hover{color:#f60;} ???????????#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;} ???????????#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;} ???????????#popMore a{color:#f60;} ???????????#popMore a:hover{color:#f00;} ???????</style> ???</head> ???<body style="height:1200px;"> ???????<script type="text/javascript" src="js/jquery.min.js"></script> ???????<script type="text/javascript"> ???????????(function($j){ ???????????????$j.positionFixed = function(el){ ???????????????????$j(el).each(function(){ ???????????????????????new fixed(this) ???????????????????}) ???????????????????return el; ?????????????????????????????????} ???????????????$j.fn.positionFixed = function(){ ???????????????????return $j.positionFixed(this) ???????????????} ???????????????var fixed = $j.positionFixed.impl = function(el){ ???????????????????var o=this; ???????????????????o.sts={ ???????????????????????target : $j(el).css(‘position‘,‘fixed‘), ???????????????????????container : $j(window) ???????????????????} ???????????????????o.sts.currentCss = { ???????????????????????top : o.sts.target.css(‘top‘), ?????????????????????????????????????right : o.sts.target.css(‘right‘), ?????????????????????????????????????bottom : o.sts.target.css(‘bottom‘), ???????????????????????????????????????left : o.sts.target.css(‘left‘) ????????????????????????????????} ???????????????????if(!o.ie6)return; ???????????????????o.bindEvent(); ???????????????} ???????????????$j.extend(fixed.prototype,{ ???????????????????ie6 : $.browser.msie && $.browser.version < 7.0, ???????????????????bindEvent : function(){ ???????????????????????var o=this; ???????????????????????o.sts.target.css(‘position‘,‘absolute‘) ???????????????????????o.overRelative().initBasePos(); ???????????????????????o.sts.target.css(o.sts.basePos) ???????????????????????o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent()); ???????????????????????o.setPos(); ???????????????????}, ???????????????????overRelative : function(){ ???????????????????????var o=this; ???????????????????????var relative = o.sts.target.parents().filter(function(){ ???????????????????????????if($j(this).css(‘position‘)==‘relative‘)return this; ???????????????????????}) ???????????????????????if(relative.size()>0)relative.after(o.sts.target) ???????????????????????return o; ???????????????????}, ???????????????????initBasePos : function(){ ???????????????????????var o=this; ???????????????????????o.sts.basePos = { ???????????????????????????top: o.sts.target.offset().top - (o.sts.currentCss.top==‘auto‘?o.sts.container.scrollTop():0), ???????????????????????????left: o.sts.target.offset().left - (o.sts.currentCss.left==‘auto‘?o.sts.container.scrollLeft():0) ???????????????????????} ???????????????????????return o; ???????????????????}, ???????????????????setPos : function(){ ???????????????????????var o=this; ???????????????????????o.sts.target.css({ ???????????????????????????top: o.sts.container.scrollTop() + o.sts.basePos.top, ???????????????????????????left: o.sts.container.scrollLeft() + o.sts.basePos.left ???????????????????????}) ???????????????????}, ???????????????????scrollEvent : function(){ ???????????????????????var o=this; ???????????????????????return function(){ ???????????????????????????o.setPos(); ???????????????????????} ???????????????????}, ???????????????????resizeEvent : function(){ ???????????????????????var o=this; ???????????????????????return function(){ ???????????????????????????setTimeout(function(){ ???????????????????????????????o.sts.target.css(o.sts.currentCss) ?????????????????????????????????????o.initBasePos(); ???????????????????????????????o.setPos() ???????????????????????????},1) ???????????????????????????} ??????????????????????????????} ???????????????}) ???????????})(jQuery) ???????????function Pop(title,url,intro){ ???????????????this.title=title; ???????????????this.url=url; ???????????????this.intro=intro; ???????????????this.apearTime=1000; ???????????????this.hideTime=500; ???????????????this.delay=10000; ???????????????//添加信息 ???????????????this.addInfo(); ???????????????//显示 ???????????????this.showDiv(); ???????????????//关闭 ?????????????this.closeDiv(); ???????????} ???????????Pop.prototype={ ?????????????addInfo:function(){ ???????????????$("#popTitle a").attr(‘href‘,this.url).html(this.title); ???????????????$("#popIntro").html(this.intro); ???????????????$("#popMore a").attr(‘href‘,this.url); ?????????????}, ?????????????showDiv:function(time){ ???????????????????if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { ?????????????????$(‘#pop‘).slideDown(this.apearTime).delay(this.delay).fadeOut(400);; ???????????????} else{//调用jquery.fixed.js,解决ie6不能用fixed ?????????????????$(‘#pop‘).show(); ???????????????????????jQuery(function($j){ ???????????????????????????$j(‘#pop‘).positionFixed() ???????????????????????}) ???????????????} ?????????????}, ?????????????closeDiv:function(){ ???????????????$("#popClose").click(function(){ ?????????????????????$(‘#pop‘).hide(); ???????????????????} ???????????????); ?????????????} ???????????} ???????</script> ???????<script type="text/javascript" > ???????//页面加载调用 ???????window.onload=function(){ ???????????//使用参数：1.标题，2.链接地址，3.内容简介 ???????????new Pop("这里是标题，哈哈", ???????????????"http://www.xttblog.com", ???????????????"欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！"); ???????} ???????</script> ???????<div id="pop" style="display:none;"> ???????????<div id="popHead"> <a id="popClose" title="关闭">关闭</a> ???????????????<h2>温馨提示</h2> ???????????</div> ???????????<div id="popContent"> ???????????????<dl> ???????????????????<dt id="popTitle"><a href="http://blog.csdn.net/xmtblog/" target="_blank">这里是标题</a></dt> ???????????????????<dd id="popIntro">这里是内容简介</dd> ???????????????</dl> ???????????????<p id="popMore"><a href="http://blog.csdn.net/xmtblog/" target="_blank">查看 »</a></p> ???????????</div> ???????</div> ???????<div style="text-align:center;clear:both"> ???????<p>欢迎大家关注我的个人博客，或者加qq群135430763共同学习！</p> ???????<p><a href="http://blog.csdn.net/xmtblog/" target="_blank">伪专家</a></p> ???????</div> ???</body></html>欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！
jQuery实现网页右下角悬浮层提示
原文地址：http://www.cnblogs.com/telwanggs/p/7728417.html