告诉你一个应有尽有的网页特效网址：<a href="http://www.7stk.com">http://www.7stk.com</a>
<hr />
<b>插件一</b>
<script src="alixixi_1.3.2.min.js"></script>
<script type="text/javascript" src="alixiix_.1.3.js"></script>
<style type="text/css" media="screen">
	.teaser {width: 545px;height: 188px;overflow: hidden;position: relative;background-color: #E0E0E0}
	.teaser img {position: absolute;top: 0;left: 0;}
	#teaser-wrap .teaser {float: left;margin: 1em;}
	*{font-size: 14px;}
	.alixixi {
		position:relative;
		font-family:arial;	
		overflow:hidden;
		border:1px solid #000;
		width:500px;
		height:188px;
	}	
	
		.alixixi .heading, .alixixi .caption {
			position:absolute;
			background:#000;
			height:50px;
			width:500px;
			opacity:0.6;
		}
		
		.alixixi .heading { 
			top:-50px;
		}

		.alixixi .caption { 		
			bottom:-50px;		
			left:0px;
		}
		
		.alixixi .heading span {
			color:#26c3e5;	
			top:-50px;
			font-weight:bold;
			display:block;
			padding:5px 0 0 10px;
		}
		
		.alixixi .caption span{
			color:#999;	
			font-size:9px;
			display:block;
			padding:5px 10px 0 10px;
		}

		
		.menumeno { 
			height: 45px;
			display: block;
		}

		.menumeno ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.menumeno ul li {
			/* width and height of the menumeno items */  
			float: left;
			overflow: hidden;
			position: relative;
			text-align: center;
			line-height: 45px;
		}

		.menumeno ul li a {
			/* must be postioned relative  */ 
			position: relative;
			display: block;
			width: 110px;
			height: 45px;
			font-family: Arial;
			font-size: 14px;
			letter-spacing: 1px;
			text-transform: uppercase;
			text-decoration: none;
			cursor: pointer;
		}

		.menumeno ul li a span {
			/* all layers will be absolute positioned */
			position: absolute;
			left: 0;
			width: 110px;
		}

		.menumeno ul li a span.out {
			top: 0px;
		}

		.menumeno ul li a span.over,
		.menumeno ul li a span.bg {
			/* hide */  
			top: -45px;
		}
		#menumeno2 {
			background: #000;		
		}
		
		#menumeno2 ul li a {
			color: #FFF;
		}

		#menumeno2 ul li a span.over {
			background: #FFF;
			color: #000;
		}
</style>
	<div id="menumeno2" class="menumeno">
			<ul>
				<li><a href="javascript:;" style="font-size: 14px">网页特效首页</a></li>
				<li><a href="javascript:;" style="font-size: 14px">网页特效</a></li>
				<li><a href="javascript:;" style="font-size: 14px">广告代码</a></li>
				<li><a href="javascript:;" style="font-size: 14px">源码下载</a></li>
				<li><a href="javascript:;" style="font-size: 14px">站长工具</a></li>
			</ul>
		</div>


<br /><b>插件二</b><br />
<div class="alixixi">
	<div class="heading"><span>网页特效,WEB开发之家</span></div>
	<img src="1.gif" width="500" height="188" alt="" />
	<div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>
</div>

	<br /><b>插件三</b><br />

<div id="teaser-wrap">
	<div class="teaser">
     	<img src="http://www.7stk.com/images/noimg.gif" alt="alixixi" />
		<div style="margin: 8px;">
			<h3>Jquery插件体验中心</h3>
			<p style="font-size: 14px;">  网页特效<BR> web开发之家，网页特效 广告代码 源码下载 文章教程 应有尽有。</p>
			<p><a href="http://www.7stk.com">欢迎访问网页特效...</a>
		</div>
	</div>
</div>
<script type="text/javascript" charset="utf-8">
$('.teaser').hover(function() {
	  // over

	$(this).children('img').stop().animate({
		left : '-545px'
	}, 500);

}, 

function() {
  // out	

	$(this).children('img').stop().animate({
		left : '0'
	}, 500);

});

	$(document).ready(function () {

		// transition effect
		style = 'easeOutQuart';

		// if the mouse hover the image
		$('.alixixi').hover(
			function() {
				//display heading and caption
				$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
			},

			function() {
				//hide heading and caption
				$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
			}
		);

					/*	2nd example	*/
			
			$("#menumeno2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menumeno2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menumeno2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});


	});
</script>