基于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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
简单实现JS计算器功能
Dec 21 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 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实现 上一篇、下一篇的代码
2012/09/29 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python如何绘制日历图和热力图
2020/08/07 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
英语专业求职信
2014/07/08 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
招商银行工作证明
2015/06/17 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python