js实现右下角提示框的方法


Posted in Javascript onFebruary 03, 2015

本文实例讲述了js实现右下角提示框的方法。分享给大家供大家参考。具体实现方法如下:

实现右下角提示框的Jquery插件 (popup.js)

//兼容ie6的fixed代码   

//jQuery(function($j){  

//    $j('#pop').positionFixed()  

//})  

(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)  

  

jQuery(function($j){  

    $j('#footer').positionFixed()  

})  

  

//pop右下角弹窗函数  

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();  

          }  

    );  

  }  

}

右下角提示框实例

<!DOCTYPE HTML>  

<html>  

<head>  

    <meta charset="UTF-8">  

    <title>jquery右下角pop弹窗</title>  

</head>  

<body>  

<h2>请看浏览器有下角</h2>  

<!--jquery右下角pop弹窗start -->  

<script type="text/javascript" >  

      window.onload=function(){  

            var pop=new Pop("这里是标题,哈哈",  

            "URL超链接",  

            "请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介");  

        }  

</script>  

<script type="text/javascript" src="jquery.min.js"></script>  

<script type="text/javascript" src="popup.js"></script>  

<div id="pop" style="display:none;">  

    <style type="text/css">  

    *{}{margin:0;padding:0;}  

    #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>  

    <div id="popHead">  

    <a id="popClose" title="关闭">关闭</a>  

    <h2>温馨提示</h2>  

    </div>  

    <div id="popContent">  

    <dl>  

        <dt id="popTitle">这里是标题</dt>  

        <dd id="popIntro">这里是内容简介</dd>  

    </dl>  

    <p id="popMore">查看 »</p>  

    </div>  

</div>  

<!--右下角pop弹窗 end-->  

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>jquery右下角弹窗   

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
Node.js中child_process实现多进程
Feb 03 #Javascript
jquery实现增加删除行的方法
Feb 03 #Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 #Javascript
director.js实现前端路由使用实例
Feb 03 #Javascript
js与jquery回车提交的方法
Feb 03 #Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 #Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
对python程序内存泄漏调试的记录
2018/06/11 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python多线程并发及测试框架案例
2019/10/15 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python requests接口测试实现代码
2020/09/08 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python 写一个水果忍者游戏
2021/01/13 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
Sql面试题
2013/03/20 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
一套软件测试笔试题
2014/07/25 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL