jQuery信息提示框(圆角框+动画)

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的非常人性化的提示信息框效果</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var humanMsg = {
	setup: function(appendTo, logName, msgOpacity) {
		humanMsg.msgID = 'humanMsg';
		humanMsg.logID = 'humanMsgLog';
		if (appendTo == undefined)
			appendTo = 'body';
		if (logName == undefined)
			logName = 'Message Log';
		humanMsg.msgOpacity = .8;
		if (msgOpacity != undefined) 
		humanMsg.msgOpacity = parseFloat(msgOpacity);
		jQuery(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);
		jQuery('#'+humanMsg.msgID+' p').html(msg)
		jQuery('#'+humanMsg.msgID+'').show().animate({ opacity: humanMsg.msgOpacity}, 200, function() {
			jQuery('#'+humanMsg.logID)
			.show().children('ul').prepend('<li>'+msg+'</li>')	
			.children('li:first').slideDown(200)		
			if ( 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 }) })
				})
			}
		})
		humanMsg.t1 = setTimeout("humanMsg.bindEvents()", 700)
		humanMsg.t2 = setTimeout("humanMsg.removeMsg()", 5000)
	},
	bindEvents: function() {
		jQuery(window)
			.mousemove(humanMsg.removeMsg)
			.click(humanMsg.removeMsg)
			.keypress(humanMsg.removeMsg)
	},
	removeMsg: function() {
		// Unbind mouse & keyboard
		jQuery(window)
			.unbind('mousemove', humanMsg.removeMsg)
			.unbind('click', humanMsg.removeMsg)
			.unbind('keypress', humanMsg.removeMsg)
		if (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)
			jQuery('#'+humanMsg.msgID).animate({ opacity: 0 }, 500, function() { jQuery(this).hide() })
	}
};
jQuery(document).ready(function(){
	humanMsg.setup();
})
</script>
<style>
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 {
	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;
}
</style>
<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery信息提示框(圆角框+动画)

分类

jQuery实例

描述

一个jquery提示框特效，黑色风可，且提示框是圆角形状，点击页面中间的几个文字，提示框信息就会动态显示，CSS和JS部分代码比较多，呵呵，新手可能读起来费劲些，再次感谢大家支持源码爱好者。