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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
React组件对子组件children进行加强的方法
Jun 23 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
如何过滤高亮显示非法字符
2006/10/09 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php定界符
2014/06/19 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python读写unicode文件的方法
2015/07/10 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
pycharm永久激活超详细教程
2020/10/29 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
行政司机岗位职责
2015/04/10 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python