jquery头部logo背景喷墨效果代码

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

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

以下是 jquery头部logo背景喷墨效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery头部logo背景喷墨效果</title>
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<style type="text/css">
body { 
	background: #534741;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	width: 810px;
	margin: 0 auto;
	padding-bottom: 50px;
}
a {
	color: #ff0099;
}
a:hover {
	background-color: #ec008c;
	color: #fff;
}
h1,h2,h3 { color: #01bef1; }
#header {
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 400px;
	height: 225px;
	position: relative;
	margin-left: -1em;
	background: url(images/header.jpg) no-repeat;
}
#header a {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 225px;
	display: block;
	border: 0;
	background: transparent;
	overflow: hidden;
}
#header .fake-hover {
	margin: 0;
	padding: 0;
	width: 400px;
	height: 225px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/header.jpg) no-repeat 0 -240px;
}
#content {
	background: #332c28;
	padding: 30px;
	width: 750px;
	margin: 0 auto;
}
</style>
<script type="text/javascript">
//<![CDATA[

var Header = {
	// Let's write in JSON to make it more modular
	addFade : function(selector){
		$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector)); 
		// Safari dislikes hide() for some reason
		$(selector+" a").bind("mouseenter",function(){
			$(selector+" .fake-hover").fadeIn("slow");
		});
		$(selector+" a").bind("mouseleave",function(){
			$(selector+" .fake-hover").fadeOut("slow");
		});
		
	}
};

$(function(){
	Header.addFade("#header");
});

//]]>
</script>
</head>
<body>
<h1 id="header"><a href="#">Awesome header</a></h1>
<div id="content">
	<h2>Fading header example</h2>
	<p>A simple example using jQuery and CSS that shows you how to create the fading header technique seen on .</p>
	<h3>Sample content</h3>
	<p>Donec hendrerit eros at leo. Duis nisl lacus, interdum quis, euismod a, accumsan quis, orci. Curabitur venenatis nunc eu dui. Phasellus rutrum porta tellus. Donec nibh erat, rutrum non, bibendum ac, iaculis sit amet, justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consequat mauris id augue. Maecenas elementum diam sit amet erat. Duis sed est et sem pellentesque sodales. Morbi ullamcorper dignissim eros. Mauris ligula enim, fermentum sed, rhoncus eu, consectetuer eu, risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tortor mauris, lobortis nec, tempor at, congue eu, nisi. Praesent ultrices.</p>

	<p>Integer imperdiet varius lacus. Sed leo urna, mollis vel, molestie et, consectetuer sed, magna. Fusce odio. Nullam in dolor eu tellus posuere interdum. Nunc id felis. Nullam pulvinar orci hendrerit odio. Vestibulum quam pede, suscipit in, gravida quis, vulputate a, nulla. Nullam imperdiet imperdiet nulla. Aliquam consectetuer porttitor justo. Sed scelerisque. Maecenas hendrerit ipsum a sem. Sed sit amet lacus. Sed dictum pellentesque tortor. Ut tellus quam, varius ut, ornare in, vestibulum vitae, sapien. Pellentesque convallis</p>
</div>
</body>
</html>

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