电子相册特效

 1 var sceneObject={
 2     init:function(){
 3         this._enterAlbum();
 4     },
 5     
 6     _enterAlbum:function(){
 7         var timer="";
 8         
 9         autoPicWall();
10         timer=setInterval(autoPicWall,4000);
11         
12     }
13 }
14 
15 var picPage=0, //当前第几张图片正在进行放大或缩小。
16     picLeft,
17     picTop;
18     
19 function autoPicWall(){
20     var $pictureWallPic=$(".pictureWall div"),
21         $own =$pictureWallPic.eq(picPage),
22         isBig=$own.hasClass(‘bigCenter‘),
23         hasClassPicRow=$own.hasClass(‘picRow‘);
24         
25     becomeBig($own,hasClassPicRow);
26     
27     //图片放大后，间隔2秒自动缩小。
28     setTimeout(becomeSmall($own,hasClassPicRow),2000);
29     
30     if(picPage<$pictureWallPic.length-1){
31         picPage++;
32     }else if(picPage == $pictureWallPic.length - 1){
33         picPage=0;
34     }
35 }
36     
37 function becomeBig($own,hasClassPicRow){
38     var $mask=$(‘.mask‘),
39         pictureWallWidth=$(‘.pictureWall‘).width(),
40         pictureWallHeight=$(‘.pictureWall‘).height();
41         
42     picLeft=$own.css(‘left‘);
43     picTop=$own.css(‘top‘);
44     
45     $own.toggleClass(‘bigCenter‘); 
46     $mask.fadeIn(); //显示遮罩层。
47     //放大图片，移动div
48     if(hasClassPicRow){
49         for(var i = 120; i < 720; i+=20){
50             $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
51             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
52         }
53     }else{
54         for(var i = 80; i < 480; i+=20){
55             $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
56             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
57         }
58     }
59 }
60 
61 function becomeSmall($own,hasClassPicRow){
62     var $mask = $(".mask"),
63           pictureWallWidth = $(".picture-wall").width(),
64           pictureWallHeight = $(".picture-wall").height();
65 
66     if(hasClassPicRow){
67         for(var i = 720; i >= 120; i-=40){
68             $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
69             /* 图片缩小到中心位置 */
70             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
71         }
72     }else{
73         for(var i = 480; i >= 80; i-=40){
74             $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
75             /* 图片缩小到中心位置 */
76             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
77         }
78     }
79     
80     /* 图片缩小到中心位置后，回到原始位置 */
81     $own.animate({"left": picLeft, "top": picTop},400,function(){
82         $mask.fadeOut(); /* 隐藏遮罩层 */
83         $own.toggleClass("bigCenter"); /* 去除放大的class属性 */
84     });
85 }
86 
87 $(function(){
88     sceneObject.init();
89 });