感应鼠标的图片遮罩动画效果
2013-04-10 09:35
453 查看
<!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="content-type" content="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://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.banner div').css('opacity',0.2);
$('.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>
如果左下角提示错误，刷新一下就可以了。
<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://files.jb51.net/upload/201010/20101031232000647.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://files.jb51.net/upload/201010/20101031232000265.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://files.jb51.net/upload/201010/20101031232000265.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://files.jb51.net/upload/201010/20101031232000235.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://files.jb51.net/upload/201010/20101031232000225.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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>感应鼠标的图片遮罩动画效果</title>
<meta http-equiv="content-type" content="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://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.banner div').css('opacity',0.2);
$('.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>
如果左下角提示错误，刷新一下就可以了。
<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://files.jb51.net/upload/201010/20101031232000647.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://files.jb51.net/upload/201010/20101031232000265.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://files.jb51.net/upload/201010/20101031232000265.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://files.jb51.net/upload/201010/20101031232000235.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://files.jb51.net/upload/201010/20101031232000225.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 感应鼠标的图片遮罩动画效果
- 感应鼠标的图片遮罩动画效果
- CSS3感应鼠标的背景闪烁和图片缩放动画效果
- CSS3鼠标悬停图片动画 多种文字动画效果
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
- 仿酒仙网品牌活动动画效果 （鼠标移上 图片平移）
- css实现鼠标移上图片遮罩效果
- 感应鼠标的滑动式图片说明效果
- jquery动画 -- 3.创建一个带遮罩效果的图片走廊
- CSS3感应鼠标背景闪烁和图片缩放效果
- css3实现图片遮罩效果鼠标hover以后出现文字
- 优秀前端教程：实现图片的形状遮罩和动画放大效果
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
- jQuery实现菜单感应鼠标滑动动画效果的方法
- CSS3感应鼠标的div背景闪烁动画效果
- 仿拉勾网动画效果-鼠标进入图片的方向滑动特效
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- 鼠标移动到图片显示遮罩效果
- jQuery演示8种不同的图片遮罩层动画效果