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 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
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
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python列表的切片实例讲解
2019/08/20 Python
python 操作excel表格的方法
2020/12/05 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
企业军训感想
2014/02/07 职场文书
小学生评语大全
2014/04/18 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Golang 对es的操作实例
2022/04/20 Golang