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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JS闭包经典实例详解
Dec 20 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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中cookie的作用域
2008/03/27 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
纯javascript版日历控件
2016/11/24 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python批量下载抖音视频
2019/06/17 Python
Django工程的分层结构详解
2019/07/18 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
大学生个人推荐信范文
2013/11/25 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
矫正人员思想汇报
2014/01/08 职场文书
食堂标语大全
2014/06/11 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
委托证明模板
2014/09/16 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书