基于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 相关文章推荐
accesskey 提交
Jun 26 Javascript
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
Javascript浅谈之this
Dec 17 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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中的观察者模式
2010/03/24 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
10条php编程小技巧
2015/07/07 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python代码如何注释
2020/06/01 Python
Keras loss函数剖析
2020/07/06 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
印尼旅游网站:via
2017/11/12 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
教师考核材料
2014/05/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书