JQuery浮动DIV提示信息并自动隐藏的代码


Posted in Javascript onAugust 29, 2010
/** 
* 浮动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 相关文章推荐
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
jQuery实现验证码功能
Mar 17 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
jQuery下的几个你可能没用过的功能
Aug 29 #Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 #Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 #Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 #Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 #Javascript
jquery 插件开发备注
Aug 27 #Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
浅谈php自定义错误日志
2015/02/13 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python将ip地址转换成整数的方法
2015/03/17 Python
Python中super的用法实例
2015/05/28 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python文件与目录操作实例详解
2016/02/22 Python
深入学习python的yield和generator
2016/03/10 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
pytorch permute维度转换方法
2018/12/14 Python
python实现代码统计器
2019/09/19 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
三年级语文教学反思
2014/02/01 职场文书
设计师求职信模板
2014/05/06 职场文书