div

最新推荐文章于 2025-08-15 09:01:53 发布

dwj200810

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

本文链接：https://blog.youkuaiyun.com/dwj200810/article/details/84445731

本文介绍了一种利用jQuery库来实现网页上浮动提示信息的方法。该方法可以根据需要调整提示内容的位置、显示时间等参数，适用于操作反馈等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	/** 
	* 浮动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 ) ); 
	} 
</script>
<title>无标题文档</title>
</head>

<body>
<input type="button" value="ddddddddddddd" onclick="showTips('ddd','vvv',300)"  />
</body>
</html>