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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 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操作文件方法问答
2007/03/16 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
JS重要知识点小结
2011/11/06 Javascript
JsRender for object语法简介
2014/10/31 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
nodejs基础应用
2017/02/03 NodeJs
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python 解析XML文件
2009/04/15 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python实现二叉树的遍历
2017/12/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python datetime模块的使用示例
2021/02/02 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
男方父母证婚词
2014/01/12 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
社区母亲节活动总结
2015/02/10 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
现场施工员岗位职责
2015/04/11 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python