遮罩效果的焦點圖

愛六六發表於2012-07-08
遮罩

已經不是第一次寫焦點圖了。但是每一次寫都有不同進步和完善。
這次帶來了遮罩效果的焦點圖。
設計思想：
採用絕對定位，關於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{width: 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%; width: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>


相關文章