初始代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head> 3 <title></title> 4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 5 <script type="text/javascript"> 6 $(function () { 7 $("div").hover( 8 function (oEvent) { 9 $("div").css("opacity", "0.45"); 10 //第一个函数相当于mouseover事件监听 11 $(oEvent.target).css("opacity", "0"); 12 13 }, 14 function (oEvent) { 15 //第二个函数相当于mouseout事件监听 16 $("div").css("opacity", "0"); 17 } 18 ); 19 }); 20 </script> 21 <style type="text/css"> 22 .float-panel{width:980px;} 23 .float-panel li a img { 24 float: left; 25 } 26 .mask-layer { 27 background: #000; 28 filter: alpha(opacity=0); 29 opacity: 0; 30 cursor: pointer; 31 position: absolute; 32 left: 0; 33 top: 0; 34 width: 100%; 35 height: 100%; 36 transition: opacity .2s linear; 37 -webkit-transition: opacity .2s linear; 38 -moz-transition: opacity .2s linear; 39 } 40 .float-panel li a { 41 position: relative; 42 display: block; 43 zoom: 1; 44 overflow: hidden; 45 } 46 li{float:left;list-style:none;} 47 </style> 48 </head> 49 <body> 50 <ul class="float-panel" > 51 <li> 52 <a href="#" target="_blank"> 53 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg"> 54 <div class="mask-layer" style="opacity: 0;"></div> 55 </a> 56 </li> 57 <li> 58 <a href="#" target="_blank"> 59 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg"> 60 <div class="mask-layer" style="opacity: 0;"></div> 61 </a> 62 </li> 63 <li> 64 <a href="#" target="_blank"> 65 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg"> 66 <div class="mask-layer" style="opacity: 0;"></div> 67 </a> 68 </li> 69 <li> 70 <a href="#" target="_blank"> 71 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg"> 72 <div class="mask-layer" style="opacity: 0;"></div> 73 </a> 74 </li> 75 <li> 76 <a href="#" target="_blank"> 77 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg"> 78 <div class="mask-layer" style="opacity: 0;"></div> 79 </a> 80 </li> 81 </ul> 82 </body></html>
简易代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head> 3 <title></title> 4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 5 <script type="text/javascript"> 6 $(function () { 7 $(".float-panel div").hover( 8 function (oEvent) { 9 $(".float-panel div").css("opacity", "0.45"); 10 //第一个函数相当于mouseover事件监听 11 $(oEvent.target).css("opacity", "0"); 12 }, 13 function (oEvent) { 14 //第二个函数相当于mouseout事件监听 15 $(".float-panel div").css("opacity", "0"); 16 } 17 ); 18 }); 19 </script> 20 <style type="text/css"> 21 .float-panel{width:980px;} 22 .mask-layer{ 23 background: #000; 24 filter: alpha(opacity=0); 25 opacity: 0; 26 cursor: pointer; 27 position: absolute; 28 left: 0; 29 top: 0; 30 width: 100%; 31 height: 100%; 32 transition: opacity .2s linear; 33 -webkit-transition: opacity .2s linear; 34 -moz-transition: opacity .2s linear; 35 } 36 .float-panel a { 37 position: relative; 38 display: block; 39 zoom: 1; 40 overflow: hidden; 41 float:left; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="float-panel" > 47 <a href="#" target="_blank"> 48 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg"> 49 <div class="mask-layer" style="opacity: 0;"></div> 50 </a> 51 <a href="#" target="_blank"> 52 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg"> 53 <div class="mask-layer" style="opacity: 0;"></div> 54 </a> 55 <a href="#" target="_blank"> 56 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg"> 57 <div class="mask-layer" style="opacity: 0;"></div> 58 </a> 59 <a href="#" target="_blank"> 60 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg"> 61 <div class="mask-layer" style="opacity: 0;"></div> 62 </a> 63 <a href="#" target="_blank"> 64 <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg"> 65 <div class="mask-layer" style="opacity: 0;"></div> 66 </a> 67 </div> 68 </body></html>