基于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 相关文章推荐
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 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
30个php操作redis常用方法代码例子
2014/07/05 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
js left,right,mid函数
2008/06/10 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python自定义函数def的应用详解
2020/06/03 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
文明礼仪演讲稿
2014/05/12 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS