感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果_圖片特效特效

感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果，鼠標(biāo)放上后會(huì)動(dòng)畫顯示文字提示，有意思哦，有興趣的朋友運(yùn)行一下看效果。

<!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>感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果</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>
如果左下角提示錯(cuò)誤，刷新一下就可以了。<br>
<div   id="znjbzjn"   class="examples_body">
	<ul class="bannerHolder">
		<li>
			<div   id="znjbzjn"   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   id="znjbzjn"   class="cornerTL"></div>
				<div   id="znjbzjn"   class="cornerTR"></div>
				<div   id="znjbzjn"   class="cornerBL"></div>
				<div   id="znjbzjn"   class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div   id="znjbzjn"   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   id="znjbzjn"   class="cornerTL"></div>
				<div   id="znjbzjn"   class="cornerTR"></div>
				<div   id="znjbzjn"   class="cornerBL"></div>
				<div   id="znjbzjn"   class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div   id="znjbzjn"   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   id="znjbzjn"   class="cornerTL"></div>
				<div   id="znjbzjn"   class="cornerTR"></div>
				<div   id="znjbzjn"   class="cornerBL"></div>
				<div   id="znjbzjn"   class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div   id="znjbzjn"   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   id="znjbzjn"   class="cornerTL"></div>
				<div   id="znjbzjn"   class="cornerTR"></div>
				<div   id="znjbzjn"   class="cornerBL"></div>
				<div   id="znjbzjn"   class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div   id="znjbzjn"   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   id="znjbzjn"   class="cornerTL"></div>
				<div   id="znjbzjn"   class="cornerTR"></div>
				<div   id="znjbzjn"   class="cornerBL"></div>
				<div   id="znjbzjn"   class="cornerBR"></div>
			</div>
		</li>
	</ul>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時(shí)間：2012-11-04

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)圖片特效特效：

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果
特效說明：
圖片特效模板-感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

感應(yīng)鼠標(biāo)的圖片遮罩動(dòng)畫效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些