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

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fwww.glzy8.com%2Fajaxjs%2Fjquery1.3.2.js%22%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24('.banner%20div').css('opacity'%2C0.4)%3B%20%0D%0A%24('.banner').hover(function()%7B%20%0D%0Avar%20el%20%3D%20%24(this)%3B%20%0D%0Ael.find('div').stop().animate(%7Bwidth%3A200%2Cheight%3A200%7D%2C'slow'%2Cfunction()%7B%20%0D%0Ael.find('p').fadeIn('fast')%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%2Cfunction()%7B%20%0D%0Avar%20el%20%3D%20%24(this)%3B%20%0D%0Ael.find('p').stop(true%2Ctrue).hide()%3B%20%0D%0Ael.find('div').stop().animate(%7Bwidth%3A60%2Cheight%3A60%7D%2C'fast')%3B%20%0D%0A%7D).click(function()%7B%20%0D%0Awindow.open(%24(this).find('a').attr('href'))%3B%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
如果左下角提示错误，刷新一下就可以了。
 
<div class="examples_body"> 
<ul class="bannerHolder"> 
<li> 
<div class="banner"> 
<a href="#" _ewebeditor_ta_href="%23" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://files.glzy8.com/upload/201010/20101031232000647.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101031232000647.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="#" _ewebeditor_ta_href="%23" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://files.glzy8.com/upload/201010/20101031232000265.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101031232000265.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="#" _ewebeditor_ta_href="%23" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://files.glzy8.com/upload/201010/20101031232000265.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101031232000265.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="#" _ewebeditor_ta_href="%23" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://files.glzy8.com/upload/201010/20101031232000235.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101031232000235.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="#" _ewebeditor_ta_href="%23" target="_blank"><img height="100" width="125" alt="The Best Designs" src="http://files.glzy8.com/upload/201010/20101031232000225.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101031232000225.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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程