已经不是第一次写焦点图了。但是每一次写都有不同进步和完善。这次带来了遮罩效果的焦点图。设计思想：采用绝对定位，关于mask是设置遮罩层，这个图层位于最上面，关于pic是焦点图片。控制width，height，margin-left，margin-top，z-index属性，便可以实现漂亮的遮罩效果。
焦点图简单的手风琴效果
下面演示最原始的效果：
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style type="text/css"> *{margin:0px;padding:0px;} #focus{ 500px; height: 300px;overflow: hidden; text-align: center; position: relative;} #focus .pic{position: absolute;top:0px;left:0px;} #focus .mask{opacity: 0.8; filter:alpha(opacity=80); position: absolute; top:50%; left: 50%; 10px; height: 10px; margin-left: -5px; margin-right: -5px; z-index: 5;} </style> <script type="text/javascript"> $(function(){ var focus= $("#focus"); var mask = focus.find(".mask"); var fimgs = focus.find(".pic"); var count = fimgs.length; var cur=0; var bchange=true; var arrimgs=new Array("http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_grass.png","http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_factor.png","http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_heard.png","http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_round.png","http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_star.png"); setInterval(function(){ cur++; if(cur===count){cur=0;} fimgs.css({"top":"50%","left":"50%","width":"500px","margin-left":"-250px","height":"300px","margin-top":"-150px","z-index":"0"}); fimgs.eq(cur-1).css({"top":"50%","left":"50%","width":"500px","margin-left":"-250px","height":"300px","margin-top":"-150px","z-index":"1"}); fimgs.eq(cur).css({"top":"50%","left":"50%","width":"50px","margin-left":"-25px","height":"30px","margin-top":"-15px","z-index":"2"}).animate({"top":"50%","left":"50%","width":"500px","margin-left":"-250px","height":"300px","margin-top":"-150px"},500); mask.attr("src",arrimgs[ parseInt(Math.random()*arrimgs.length)]); if(bchange){ mask.css({"top":"50%","left":"50%","width":"10px","margin-left":"-5px","height":"10px","margin-top":"-5px","opacity":"0.8"}); bchange=false; } mask.animate({"top":"50%","left":"50%","width":"600px","margin-left":"-300px","height":"400px","margin-top":"-200px","opacity":"0"},800); bchange=true; },3000); }); </script> </head> <body> <div id="focus"> <img class="mask" alt="" src="heard.png" /> <img class="pic" width="500" height="300" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_1.jpg" style="z-index:1" /> <img class="pic" width="50" height="30" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_2.jpg" /> <img class="pic" width="50" height="30" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_3.jpg" /> <img class="pic" width="50" height="30" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_4.jpg" /> <img class="pic" width="50" height="30" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_5.jpg" /> </div> </body> </html>
运行代码