搜索

首页 >web前端 >js教程 >jQuery实现网页右下角悬浮层提示

jQuery实现网页右下角悬浮层提示

大家讲道理
大家讲道理原创
2016-11-10 14:43:461404浏览

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿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:&#39;微软雅黑&#39;;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(&#39;position&#39;,&#39;fixed&#39;),
                        container : $j(window)
                    }
                    o.sts.currentCss = {
                        top : o.sts.target.css(&#39;top&#39;),              
                        right : o.sts.target.css(&#39;right&#39;),              
                        bottom : o.sts.target.css(&#39;bottom&#39;),                
                        left : o.sts.target.css(&#39;left&#39;)             
                    }
                    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(&#39;position&#39;,&#39;absolute&#39;)
                        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(&#39;position&#39;)==&#39;relative&#39;)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==&#39;auto&#39;?o.sts.container.scrollTop():0),
                            left: o.sts.target.offset().left - (o.sts.currentCss.left==&#39;auto&#39;?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(&#39;href&#39;,this.url).html(this.title);
                $("#popIntro").html(this.intro);
                $("#popMore a").attr(&#39;href&#39;,this.url);
              },
              showDiv:function(time){
                    if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
                  $(&#39;#pop&#39;).slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
                } else{//调用jquery.fixed.js,解决ie6不能用fixed
                  $(&#39;#pop&#39;).show();
                        jQuery(function($j){
                            $j(&#39;#pop&#39;).positionFixed()
                        })
                }
              },
              closeDiv:function(){
                $("#popClose").click(function(){
                      $(&#39;#pop&#39;).hide();
                    }
                );
              }
            }
        </script>
        <script type="text/javascript" >
        //页面加载调用
        window.onload=function(){
            //使用参数：1.标题，2.链接地址，3.内容简介
            new Pop("这里是标题，哈哈",
                "http://www.php.cn",
                "php中文网");
        }
        </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="www.php.cn" target="_blank">这里是标题</a></dt>
                    <dd id="popIntro">这里是内容简介</dd>
                </dl>
                <p id="popMore"><a href="www.php.cn" target="_blank">查看 »</a></p>
            </div>
        </div>
        <div style="text-align:center;clear:both">
        <p>php中文网</p>
        <p><a href="www.php.cn" target="_blank">php中文网</a></p>
        </div>
    </body>
</html>


声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js模仿java的Map集合,实现功能下一篇：完整的JavaScript版的信用卡校验代码

相关文章

查看更多