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 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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/08/19 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
在IPython中执行Python程序文件的示例
2018/11/01 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
教师岗位职责范本
2015/04/02 职场文书
公司员工培训管理制度
2015/08/04 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js