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 相关文章推荐
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
angular select 默认值设置方法
Jun 23 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
什么是MVC,好东西啊
2007/05/03 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
深入理解Python爬虫代理池服务
2018/02/28 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python支持多线程的爬虫实例
2019/12/21 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
小学生检讨书大全
2014/02/06 职场文书
事业单位鉴定材料
2014/05/25 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技