基于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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JavaScript中变量提升机制示例详解
Dec 27 Javascript
Openlayers绘制聚合标注
Sep 28 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 xml-rpc远程调用
2008/12/19 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python实现多线程网页下载器
2018/04/15 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
成绩单公证书
2014/04/10 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
给上级领导的感谢信
2015/01/22 职场文书
电力工程合作意向书
2015/05/11 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
公司管理建议书
2015/09/14 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript