Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery realisiert die Floating-Layer-Eingabeaufforderung in der unteren rechten Ecke der Webseite

大家讲道理
Freigeben: 2016-11-10 14:43:46
Original
1371 Leute haben es durchsucht

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子,很简单。是仿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>
Nach dem Login kopieren


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage