<!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>jQuery插件實現(xiàn)感應(yīng)鼠標(biāo)的圖片遮罩動畫效果丨芯晴網(wǎng)頁特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<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;
}
/* The main banner unordered list */
.bannerHolder {
width: 726px;
margin: 20px 0 15px 0;
padding: 20px 10px 20px 10px;
background-color: #f7f7f7;
border: 1px solid #eee;
overflow: hidden;
/* CSS3 rounded corners */
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
/* Hiding the bullets of the li elements: */
.bannerHolder li {
list-style: none;
display: inline;
}
/* The banner divs */
.banner {
position: relative;
width: 125px;
height: 125px;
overflow: hidden;
float: left;
display: inline;
margin: 0 10px
}
/* The banner divs */
.banner img {
display: block;
border: none;
}
/* The dark animated divs */
.banner div {
position: absolute;
z-index: 100;
background-color: #222;
width: 60px;
height: 60px;
cursor: pointer;
/* Setting a really big value for border-radius
will make the divs perfect circles */
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
/* Positioning the animated divs outside the
corners of the visible banner area: */
.banner .cornerTL {
left:-63px;
top:-63px;
}
.banner .cornerTR {
right:-63px;
top:-63px;
}
.banner .cornerBL {
left:-63px;
bottom:-63px;
}
.banner .cornerBR {
right:-63px;
bottom:-63px;
}
/* The "Visit Company" text */
.banner p {
display: none; /* hidden by default */
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.tkk7.com/images/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Lowering the opacity of all slide in divs
$('.banner div').css('opacity',0.4);
// Using the hover method
$('.banner').hover(function(){
// Executed on mouseenter
var el = $(this);
// Find all the divs inside the banner div,
// and animate them with the new size
el.find('div').stop().animate({width:200,height:200},'slow',function(){
// Show the "Visit Company" text:
el.find('p').fadeIn('fast');
});
},function(){
// Executed on moseleave
var el = $(this);
// Hiding the text
el.find('p').stop(true,true).hide();
// Animating the divs
el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
// When clicked, open a tab with the address of the hyperlink
window.open($(this).find('a').attr('href'));
});
});
</script>
</head>
<body>
預(yù)覽效果時左下角會提示錯誤，而且看不到效果，刷新一下就可以看到效果了；當(dāng)然，在實際使用中，不會出現(xiàn)這樣的問題。<br>
<!--把下面代碼加到<body>與</body>之間-->
<div class="examples_body">
<ul class="bannerHolder">
<li>
<div class="banner">
<a target="_blank"><img height="125" width="125" alt="紅葉傳情" src="http://www.tkk7.com/images/m01.jpg"></a>
<p class="companyInfo">紅葉傳情</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a target="_blank"><img height="125" width="125" alt="野花綻放" src="http://www.tkk7.com/images/m02.jpg"></a>
<p class="companyInfo">野花綻放</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a target="_blank"><img height="125" width="125" alt="往事如茶" src="http://www.tkk7.com/images/m03.jpg"></a>
<p class="companyInfo">往事如茶</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a target="_blank"><img height="125" width="125" alt="油菜花開" src="http://www.tkk7.com/images/m04.jpg"></a>
<p class="companyInfo">油菜花開</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a target="_blank"><img height="125" width="125" alt="玫瑰情思" src="http://www.tkk7.com/images/m05.jpg"></a>
<p class="companyInfo">玫瑰情思</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a target="_blank">芯晴網(wǎng)頁特效</a>丨CsrCode.Cn 收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。來源：中國站長天空</font></p>