基于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实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python如何读写CSV文件
2020/08/13 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
英文请假条
2014/04/11 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
公司股东出资证明书
2014/11/01 职场文书
辛亥革命观后感
2015/06/02 职场文书
军事博物馆观后感
2015/06/05 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS