软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：图片遮罩

<!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.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> 
如果左下角提示错误，刷新一下就可以了 。
 
<div class="examples_body"> 
<ul class="bannerHolder"> 
<li> 
<div class="banner"> 
<img height="100" width="125" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000647.jpg"> 
<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"> 
<img height="100" width="125" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000265.jpg"> 
<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"> 
<img height="100" width="125" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000265.jpg"> 
<p class="companyInfo">Visit The Best Designs</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2020/11m82229.html"  target=_blank > 数字人民币究竟是啥 我们简单总结了三个要点 </a></td><td><a href="http://www.zhujiangroad.com/notebook/news/2020/10m82137.html"  target=_blank > 全球第一款折叠屏电脑，ThinkPad X1 Fold真机 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/hardware/news/2021/3m82942.html"  target=_blank > 再造一个台积电需要多少钱：5年，1万亿！ </a></td><td><a href="http://www.zhujiangroad.com/digi/news/2022/6m85452.html"  target=_blank > 你身边的汽车可能在“偷窥”你 </a></td></tr></table></div> 
<div class="cornerTL"></div> 
<div class="cornerTR"></div> 
<div class="cornerBL"></div> 
<div class="cornerBR"></div> 
</div> 
</li> 
<li> 
<div class="banner"> 
<img height="100" width="125" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000235.jpg"> 
<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"> 
<img height="100" width="125" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000225.jpg"> 
<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>

技术文章快速查找

jquery 选项卡效果新手代码

JavaScript switch case 的用法实例[范围]

JQuery获取或设置ckeditor的数据(示例代码)

javascript陷阱一不小心你就中招了(字符运算)

javascript 获取所有id中包含某关键字的控件的实现代码

JQuery 获取和设置Select选项的代码

探究DOM文档对象模型用法

JavaScript基础语法让人疑惑的地方小结

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建