基于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 文档的编码问题解决
Mar 01 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
document.forms用法示例介绍
Jun 26 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
vuex进阶知识点巩固
May 20 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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计算排列组合的方法
2013/11/13 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
js中apply方法的使用详细解析
2013/11/04 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
AngularJS实现注册表单验证功能
2017/10/16 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
前端深入理解Typescript泛型概念
2020/03/09 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python实现端口转发器的方法
2015/03/13 Python
Python三级菜单的实例
2017/09/13 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python底层封装实现方法详解
2020/01/22 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python创建文本文件的简单方法
2020/08/30 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
2014年纪检部工作总结
2014/11/12 职场文书
2014年部门工作总结
2014/11/12 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
初中家长意见
2015/06/03 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS