感应鼠标的图片遮罩动画效果_图片特效特效

感应鼠标的图片遮罩动画效果，鼠标放上后会动画显示文字提示，有意思哦，有兴趣的朋友运行一下看效果。

<!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>
<title>感应鼠标的图片遮罩动画效果</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
html, body, div,ul, li { 
	margin: 0;
	padding: 0;
}
div.examples_body {
     width: 750px;
	 margin: 0px auto;
	 clear: both;
	 overflow: hidden;
}
.bannerHolder {
	width: 726px;
	margin: 20px 0 15px 0;
	padding: 20px 10px 20px 10px;
	background-color: #f7f7f7;
	border: 1px solid #eee;
	overflow: hidden;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}
.bannerHolder li {
	list-style: none;
	display: inline;
}
.banner {
	position: relative;
	width: 125px;
	height: 100px;
	overflow: hidden;
	float: left;
	display: inline;
	margin: 0 10px
}
.banner img {
	display: block;
	border: none;
}
.banner div {
	position: absolute;
	z-index: 100;
	background-color: #222;
	width: 60px;
	height: 60px;
	cursor: pointer;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	border-radius:100px;
}
.banner .cornerTL { 
	left:-63px; 
	top:-63px; 
}
.banner .cornerTR { 
	right:-63px; 
	top:-63px; 
}
.banner .cornerBL { 
	left:-63px; 
	bottom:-63px; 
}
.banner .cornerBR { 
	right:-63px; 
	bottom:-63px; 
}
.banner p {
	display: none; 
	left: 0;
	top: 57px;
	width: 100%;
	z-index: 200;
	position: absolute;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size: 11px;
	text-align: center;
	cursor: pointer;
}
</style>
<script type="text/javascript" src="http://p1.mb5u.com/texiao/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.banner div').css('opacity',0.4);
$('.banner').hover(function(){
  var el = $(this);
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   el.find('p').fadeIn('fast');
  });
},function(){
  var el = $(this);
  el.find('p').stop(true,true).hide();
  el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
  window.open($(this).find('a').attr('href'));
});
});
</script>
</head>
<body>
如果左下角提示错误，刷新一下就可以了。<br>
<div class="examples_body">
	<ul class="bannerHolder">
		<li>
			<div class="banner">
				<a href="#" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://p1.mb5u.com/texiao/1/20110225160605680.jpg"></a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="#" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://p1.mb5u.com/texiao/1/20110225160605681.jpg"></a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="#" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://p1.mb5u.com/texiao/1/20110225160605681.jpg"></a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="#" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://p1.mb5u.com/texiao/1/20110225160605682.jpg"></a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="#" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://p1.mb5u.com/texiao/1/20110225160605683.jpg"></a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
	</ul>
</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-04

[收藏][报错][返回列表]

感应鼠标的图片遮罩动画效果_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些