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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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生成带有雪花背景的验证码
2006/10/09 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php实现点击可刷新验证码
2015/11/07 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
python实现两张图片的像素融合
2019/02/23 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python生成器generator原理及用法解析
2020/07/20 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
什么是Web Service?
2012/07/25 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
大学生标准自荐书
2014/06/15 职场文书
年检委托书
2014/08/30 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android