基于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 相关文章推荐
jquery.map()方法的使用详解
Jul 09 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
原生JS中应该禁止出现的写法
May 05 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
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python生成数字图片代码分享
2017/10/31 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python爬取微信公众号文章
2018/08/31 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
python interpolate插值实例
2020/07/06 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
快餐公司创业计划书
2014/04/29 职场文书
乳制品整治工作方案
2014/05/29 职场文书
思想品德课教学反思
2016/02/24 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python