jQuery人性化提示信息框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery人性化提示信息框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery人性化提示信息框效果</title>
<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="humanmsg.js"></script>
	<link href="humanmsg.css" media="screen" type="text/css" rel="stylesheet">

	<script>
	jQuery(document).ready(function() {
		jQuery('a.showmessage').click(function() {
			humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
			return false;
		})

		jQuery('a.showmessage:last').click(function() {
			humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
			return false;
		})
	})
	</script>
	
	<style>
		p.links {
			position: absolute;
			font: 2em Helvetica, Arial, Sans-Serif;
			top: 40%;
			left: 50%;
			width: 400px;
			margin-left: -200px;
			text-align: center;			
		}
		
		p.links a {
			text-decoration: none;
			color: #888;
		}
		
		p.links a:hover {
			color: #222;
		}
		
		p.links a.home {
			font-size: 10px;
			line-height: 30px;
		}
	</style>
</head>
<body>

	<p class="links">
		<a href="#" class="showmessage">Klaatu</a>
		<a href="#" class="showmessage">Barada</a>
		<a href="#" class="showmessage">Nikto</a><br />
		<a href="#" class="home">Humanized Messages</a>
	</p>
</body>
</html>

JS代码(humanmsg.js):

/*HUMANIZED MESSAGES 1.0idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messageshome - http://humanmsg.googlecode.com*/
var humanMsg ={
	setup:function(appendTo,logName,msgOpacity){
	humanMsg.msgID = 'humanMsg';
	humanMsg.logID = 'humanMsgLog';
	// appendTo is the element the msg is appended toif (appendTo == undefined)appendTo = 'body';
	// The text on the Log tabif (logName == undefined)logName = 'Message Log';
	// Opacity of the messagehumanMsg.msgOpacity = .8;
	if (msgOpacity != undefined)humanMsg.msgOpacity = parseFloat(msgOpacity);
	// Inject the message structurejQuery(appendTo).append('<div id="'+humanMsg.msgID+'" class="humanMsg"><div class="round"></div><p></p><div class="round"></div></div> <div id="'+humanMsg.logID+'"><p>'+logName+'</p><ul></ul></div>')jQuery('#'+humanMsg.logID+' p').click(function(){
	jQuery(this).siblings('ul').slideToggle()}
)}
,displayMsg:function(msg){
	if (msg == '')return;
	clearTimeout(humanMsg.t2);
	// Inject messagejQuery('#'+humanMsg.msgID+' p').html(msg)// Show messagejQuery('#'+humanMsg.msgID+'').show().animate({
	opacity:humanMsg.msgOpacity}
,200,function(){
	jQuery('#'+humanMsg.logID).show().children('ul').prepend('<li>'+msg+'</li>')// Prepend message to log.children('li:first').slideDown(200)// Slide it downif ( jQuery('#'+humanMsg.logID+' ul').css('display') == 'none'){
	jQuery('#'+humanMsg.logID+' p').animate({
	bottom:40}
,200,'linear',function(){
	jQuery(this).animate({
	bottom:0}
,300,'easeOutBounce',function(){
	jQuery(this).css({
	bottom:0}
)}
)}
)}
}
)// Watch for mouse & keyboard in .5shumanMsg.t1 = setTimeout("humanMsg.bindEvents()",700)// Remove message after 5shumanMsg.t2 = setTimeout("humanMsg.removeMsg()",5000)}
,bindEvents:function(){
	// Remove message if mouse is moved or key is pressedjQuery(window).mousemove(humanMsg.removeMsg).click(humanMsg.removeMsg).keypress(humanMsg.removeMsg)}
,removeMsg:function(){
	// Unbind mouse & keyboardjQuery(window).unbind('mousemove',humanMsg.removeMsg).unbind('click',humanMsg.removeMsg).unbind('keypress',humanMsg.removeMsg)// If message is fully transparent,fade it outif (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)jQuery('#'+humanMsg.msgID).animate({
	opacity:0}
,500,function(){
	jQuery(this).hide()}
)}
}
;
	jQuery(document).ready(function(){
	humanMsg.setup();
}
)

CSS代码(humanmsg.css):

/*HUMANIZED MESSAGES 1.0idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messageshome - http://humanmsg.googlecode.com*/
html,body{height:100%;/* Damn you IE! */
}
.humanMsg{font:normal 20px/50px Helvetica,Arial,Sans-Serif;letter-spacing:-1px;position:fixed;top:130px;left:25%;width:50%;color:white;background-color:black;text-align:center;display:none;opacity:0;z-index:100000;}
.humanMsg .round{border-left:solid 2px white;border-right:solid 2px white;font-size:1px;height:2px;}
.humanMsg p{padding:.3em;display:inline;}
.humanMsg a{display:none;}
#humanMsgLog{font:normal 10px Helvetica,Arial,Sans-Serif;color:white;position:fixed;bottom:0;left:0;width:100%;max-height:200px;display:none;z-index:10000;}
#humanMsgLog p{position:relative;left:50%;width:200px;margin:0;margin-left:-100px;padding:0 10px;line-height:20px;background:#333;text-align:center;white-space:pre;cursor:pointer;}
#humanMsgLog p:hover{background:#222;}
#humanMsgLog ul{background:#eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAARCAIAAACaSvE/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNqEjVEKACAIQ516Ee//5wVNCjIjaB/iY5vC3YkoIgDkVDOjQ5pqLCI3r2bLFzNzyydvM4uKqfJPKN4vyl9LO/7o3/6PhwADAIWkFPjc5eRrAAAAAElFTkSuQmCC) repeat-x;margin:0;padding:0;position:relative;max-height:180px;overflow:auto;display:none;}
#humanMsgLog ul li{color:#555;font-size:12px;list-style-type:none;border-bottom:1px solid #ddd;line-height:40px;display:none;padding:0 20px;position:relative;overflow:hidden;white-space:pre;}
#humanMsgLog ul li:hover{background:#f2f2f2;}
#humanMsgLog ul li:first-child{margin-top:1px;}
#humanMsgLog ul li .error{color:orangered;}
#humanMsgLog ul li .indent{position:absolute;top:0;left:100px;margin-right:200px;height:inherit;}

附件:下载该文件资源,减少时间成本(增值服务)