jQuery实现的鼠标悬停图片遮罩动画效果源码.zip资源-CSDN文库

共8个文件

jpg：5个

css：1个

html：1个

版权申诉

jquery

77 浏览量 2022-11-07 00:26:31 上传评论收藏 54KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现的鼠标悬停图片遮罩动画效果源码.zip （8个子文件）

132686924888197662

css

zzsc.css 2KB

images

seagaia_miyazaki.jpg 4KB

slamdunker.jpg 3KB

aloha.jpg 3KB

season2.jpg 4KB

season1.jpg 4KB

index.html 4KB

jquery.min.js 94KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery鼠标悬停图片遮罩效果 </title> <link rel="stylesheet" type="text/css" href="css/zzsc.css" media="all"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body>   <div id="container"> <div id="wrap-container" class="clearfix"> <div class="examples_body"> <ul class="bannerHolder"> <li> <div class="banner"> <a href="http://sc.chinaz.com" target="_blank"> <img height="125" width="125" alt="The Best Designs" src="images/aloha.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 href="http://sc.chinaz.com/" target="_blank"> <img height="125" width="125" alt="Mail Chimp" src="images/season1.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 href="http://sc.chinaz.com/" target="_blank"> <img height="125" width="125" alt="Mail Chimp" src="images/season2.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 href="http://sc.chinaz.com/" target="_blank"> <img height="125" width="125" alt="Mail Chimp" src="images/slamdunker.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 href="http://sc.chinaz.com/" target="_blank"> <img height="125" width="125" alt="Mail Chimp" src="images/seagaia_miyazaki.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> </div>  </div>  <script> $(document).ready(function(){ // 0.4代表遮罩的透明度 $('.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>  </body> </html>

评论收藏

内容反馈

版权申诉