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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
js实现简单页面全屏
Sep 17 Javascript
兼容主流浏览器的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
谈谈PHP语法(4)
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Flask框架配置与调试操作示例
2018/07/23 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
采购部长岗位职责
2014/06/13 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
原告代理词范文
2015/05/25 职场文书
催款函范本大全
2015/06/24 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
python实现简易自习室座位预约系统
2021/06/30 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技