基于JQuery的浮动DIV显示提示信息并自动隐藏


Posted in Javascript onFebruary 11, 2011
/** 
* 浮动DIV定时显示提示信息,如操作成功, 失败等 
* @param string tips (提示的内容) 
* @param int height 显示的信息距离浏览器顶部的高度 
* @param int time 显示的时间(按秒算), time > 0 
* @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击</a> 
* @sample 上面代码表示点击后显示操作成功3秒钟, 距离顶部100px 
* @copyright ZhouHr 2010-08-27 
*/ 
function showTips( tips, height, time ){ 
var windowWidth = document.documentElement.clientWidth; 
var tipsDiv = '<div class="tipsClass">' + tips + '</div>'; $( 'body' ).append( tipsDiv ); 
$( 'div.tipsClass' ).css({ 
'top' : height + 'px', 
'left' : ( windowWidth / 2 ) - ( tips.length * 13 / 2 ) + 'px', 
'position' : 'absolute', 
'padding' : '3px 5px', 
'background': '#8FBC8F', 
'font-size' : 12 + 'px', 
'margin' : '0 auto', 
'text-align': 'center', 
'width' : 'auto', 
'color' : '#fff', 
'opacity' : '0.8' 
}).show(); 
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) ); 
}
Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
Js基础学习资料
Nov 23 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
Javascript面向对象之四 继承
Feb 08 #Javascript
javascript面向对象之二 命名空间
Feb 08 #Javascript
javascript中的对象创建 实例附注释
Feb 08 #Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
一次失败的jQuery优化尝试小结
Feb 06 #Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 #Javascript
基于jQuery的自动完成插件
Feb 03 #Javascript
You might like
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python3 log10()函数简单用法
2019/02/19 Python
python 列表推导式使用详解
2019/08/29 Python
Python socket聊天脚本代码实例
2020/01/02 Python
keras中的History对象用法
2020/06/19 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
老师推荐信
2013/10/28 职场文书
目标责任书格式
2014/07/28 职场文书
2014年市场部工作总结
2014/11/25 职场文书
介绍信的写法
2015/01/31 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Docker部署Mysql8的实现步骤
2022/07/07 Servers