js网页右下角提示框实例

 更新时间:2014年10月14日 10:38:18   投稿:shichen2014  
这篇文章主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下

本文实例讲述了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 复制对象与Object.assign方法无法实现深复制

    JavaScript 复制对象与Object.assign方法无法实现深复制

    这篇文章主要介绍了JavaScript 复制对象与Object.assign方法无法实现深复制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JavaScript中极易出错的操作符运算总结

    JavaScript中极易出错的操作符运算总结

    这篇文章主要给大家介绍了关于JavaScript中极易出错的操作符运算的相关资料,包括了算术运算符、比较运算符、逻辑运算符、赋值运算符、一元运算符以及运算优先级等问题,需要的朋友可以参考下
    2021-08-08
  • JS中常见的6种继承方式总结

    JS中常见的6种继承方式总结

    继承是面向对象三大特征之一,可以使得子类具有父类的属性和方法,同时还可以在子类中重新定义以及追加属性和方法,本文为大家整理了JS中常见的6种继承方式,希望对大家有所帮助
    2023-08-08
  • js清空表单数据的两种方式(遍历+reset)

    js清空表单数据的两种方式(遍历+reset)

    这篇文章主要介绍了js清空表单数据的两种方式(遍历+reset),需要的朋友可以参考下
    2014-07-07
  • JavaScript学习笔记之创建对象

    JavaScript学习笔记之创建对象

    在JavaScript中对象是一种基本的数据类型,在数据结构上是一种散列表,可以看作是属性的无序集合,除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象,需要的朋友参考下吧
    2016-03-03
  • 二叉树先序遍历的非递归算法具体实现

    二叉树先序遍历的非递归算法具体实现

    这篇文章主要介绍了二叉树先序遍历的非递归算法,有需要的朋友可以参考一下
    2014-01-01
  • JavaScript禁止页面操作的示例代码

    JavaScript禁止页面操作的示例代码

    本篇文章是对JavaScript禁止页面操作的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 微信小程序中使用vant组件库的超详细图文教程

    微信小程序中使用vant组件库的超详细图文教程

    说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧,下面这篇文章主要给大家介绍了关于微信小程序中使用vant组件库的超详细图文教程,需要的朋友可以参考下
    2023-03-03
  • js贪吃蛇游戏实现思路和源码

    js贪吃蛇游戏实现思路和源码

    这篇文章主要为大家介绍了js贪吃蛇游戏实现思路,并分享贪吃蛇游戏源码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • js控制滚动条滚动的两种简单方法

    js控制滚动条滚动的两种简单方法

    这篇文章主要给大家介绍了关于js控制滚动条滚动的两种简单方法,通过JavaScript可以直接控制滚动条的位置,从而达到锁定滚动条的效果,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07

最新评论