jQuery實現網頁右下角懸浮層提示

業餘草發表於2015-05-07
jQuery網頁

最近有同事提到類似網頁右下角的訊息懸浮提示框的製作。我之前也做過一個類似的例子，很簡單。是仿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共同學習！

相關文章