基于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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
小程序分享模块超级详解(推荐)
Apr 10 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生成静态HTML文档的原理
2012/10/29 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js正则表达exec与match的区别说明
2014/01/29 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python excel转换csv代码实例
2019/08/26 Python
python实现用户名密码校验
2020/03/18 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
Android面试宝典
2013/08/06 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2016年端午节寄语
2015/12/04 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL