基于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 相关文章推荐
arguments对象
Nov 20 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
简单的渐变轮播插件
Jan 12 Javascript
angular实现form验证实例代码
Jan 17 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
SONY ICF-F10中波修复记
2021/03/02 无线电
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
几行js代码实现自适应
2017/02/24 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
详解vue v-model
2020/08/31 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python迭代器常见用法实例分析
2019/11/22 Python
Django用户身份验证完成示例代码
2020/04/03 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python gevent协程切换实现详解
2020/09/14 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
邀请函怎么写
2015/01/30 职场文书
大学生年度个人总结
2015/02/15 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
python基础之文件操作
2021/10/24 Python