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语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
JavaScript实现简单拖拽效果
Sep 15 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中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python实现kmp算法的实例代码
2019/04/03 Python
python实现名片管理系统项目
2019/04/26 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
文明风采获奖感言
2014/02/18 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
科技之星事迹材料
2014/06/02 职场文书
公司辞职信模板
2015/05/13 职场文书
运动员入场词
2015/07/18 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server