js网页右下角提示框实例


Posted in Javascript onOctober 14, 2014

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

html代码部分如下:

<style type="text/css">

.messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:99999; left: 0px; top: 0px; visibility:hidden; width: 230px; position: absolute; background:#cfdef4; text-align:left}

.messageTip .close{position:absolute; right:0px; font-weight:bold; padding:4px 4px 0 0;}

.messageTip .close a{color:red;font-size:12px; text-decoration:none;}

.messageTip .content{border-top: #ffffff 1px solid; border-left: #ffffff 1px solid}

.messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; height:22px;}

.messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; padding:10px; margin:1px}

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

<div id="eMeng" class="messageTip">

    <div class="close"><a href="javascript:msgTip.close();" title="关闭">×</a></div>

    <div class="content">

        <div class="title">系统提示:</div>

        <div class="msg">

        内容

        </div>

    </div>

</div>

js代码部分如下:

function messageTip(pJso) {

    _.init(this, pJso, {

        name: 'msg'//提示框标签ID

    });

    this.eMsg = document.getElementById(this.name);

}
messageTip.prototype =

{

    //提示框始终在最右下角

    rePosition: function(_this) {

        var divHeight = parseInt(_this.eMsg.offsetHeight, 10);

        var divWidth = parseInt(_this.eMsg.offsetWidth, 10);

        var docWidth = document.body.clientWidth;

        var docHeight = document.body.clientHeight;

        _this.eMsg.style.top = docHeight - divHeight + parseInt(document.body.scrollTop, 10);

        _this.eMsg.style.left = docWidth - divWidth + parseInt(document.body.scrollLeft, 10);

    },
    //提示框慢慢往上升

    moveDiv: function(_this) {

        /*

        这里可以设置自动几秒后关闭

        ...

        */

        try {

            if (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight + parseInt(document.body.scrollTop, 10))) {

                window.clearInterval(_this.objTimer);

                _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);

            }

            _this.divTop = parseInt(_this.eMsg.style.top, 10);

            _this.eMsg.style.top = _this.divTop - 1;

        }

        catch (e) {

        }

    },

    

    //关闭提示框

    close: function() {

        this.eMsg.style.visibility = 'hidden';

        if (this.objTimer) window.clearInterval(this.objTimer);

    },
    //显示提示框

    show: function() {

        var divTop = parseInt(this.eMsg.style.top, 10);

        this.divTop = divTop;

        var divLeft = parseInt(this.eMsg.style.left, 10);
        var divHeight = parseInt(this.eMsg.offsetHeight, 10);

        this.divHeight = divHeight;
        var divWidth = parseInt(this.eMsg.offsetWidth, 10);

        var docWidth = document.body.clientWidth;

        var docHeight = document.body.clientHeight;

        this.docHeight = docHeight;
        this.eMsg.style.top = parseInt(document.body.scrollTop, 10) + docHeight + 10;

        this.eMsg.style.left = parseInt(document.body.scrollLeft, 10) + docWidth - divWidth;

        this.eMsg.style.visibility = "visible";
        var _this = this;

        this.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);

    }

}
var msgTip = new messageTip({ name: 'eMeng' });

window.onload = function() { msgTip.show(); };

window.onresize = function() { msgTip.rePosition(msgTip); };

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

Javascript 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
使用Vant完成Dialog弹框案例
Nov 11 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 #Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 #Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 #Javascript
javascript实现分栏显示小技巧附图
Oct 13 #Javascript
jquery引用方法时传递参数原理分析
Oct 13 #Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 #Javascript
js的touch事件的实际引用
Oct 13 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP实现货币换算的方法
2014/11/29 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python matlibplot绘制3D图形
2018/07/02 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python爬虫增加访问量的方法
2019/08/22 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
英文升职感谢信
2015/01/23 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
教师远程研修感悟
2015/11/18 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang
英镑符号 £
2022/02/17 杂记
MySQL 数据表操作
2022/05/04 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL