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模拟类继承小例子
Jul 17 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JS实现网页烟花动画效果
Mar 10 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 setcookie函数的参数说明及其用法
2014/04/20 PHP
php简单实现MVC
2015/02/05 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python变量不能以数字打头详解
2016/07/06 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
个人先进材料范文
2014/12/30 职场文书
党组织结对共建协议书
2016/03/23 职场文书
详解nginx location指令
2022/01/18 Servers
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
springboot读取nacos配置文件
2022/05/20 Java/Android