基于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系列之数值计算
Jun 07 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
OpenLayers3实现测量功能
Sep 25 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
杏林同学录(八)
2006/10/09 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
php多线程并发实现方法
2016/09/30 PHP
JavaScript编写连连看小游戏
2015/07/07 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
ipython和python区别详解
2019/06/26 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
学校安全责任书范本
2014/07/23 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
英语通知范文
2015/04/22 职场文书
预备党员考察意见范文
2015/06/01 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
学习nginx基础知识
2021/09/04 Servers
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript