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 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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测试程序运行时间的类
2012/02/05 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
如何将python中的List转化成dictionary
2016/08/15 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
一夜的工作教学反思
2014/02/08 职场文书
征婚广告词
2014/03/17 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python