jQuery实现网页右下角悬浮层提示-js教程-PHP中文网

首页

web前端

js教程

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

大家讲道理

Nov 10, 2016 pm 02:43 PM

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿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 id="温馨提示">温馨提示</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

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。