基于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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
jquery仿微信聊天界面
May 06 jQuery
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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
改进的IP计数器
2006/10/09 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
python制作图片缩略图
2019/04/30 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python多进程间通信代码实例
2019/09/30 Python
Python with语句用法原理详解
2020/07/03 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
秋季运动会稿件
2014/01/30 职场文书
干部选拔任用方案
2014/05/26 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
保护环境的宣传语
2015/07/13 职场文书
运动会广播稿20字
2015/08/19 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Python快速实现一键抠图功能的全过程
2021/06/29 Python