电子相册特效

引言

      初入前端这行不久，对很多东西还是很陌生，页面布局、合理使用Html标签、CSS属性、js书写习惯等等还都不是很熟悉，所以看到感兴趣的东西就想看看源码，看看实现原理，用来学习。 前几天看到tattoo写的一个jquery版结婚电子请帖，对首页的相册效果感兴趣，所以把源码打开看了两遍，自己再敲了一遍。

思路分析

     1、页面使用embed标签内置了音乐。 只是没有循环播放。

     2、CSS3使用了属性box-shadow、border-radius属性。

     3、相册总体使用了postion布局， 共12张图片，分别用position:absolute固定位置。

     4、图片按照索引顺序放大和缩小。图片从容器中心位置开始放大，放大后间隔2秒，回到容器左上角，再依次回到原始位置。

效果

 

 关键代码

var sceneObject={
    init:function(){
        this._enterAlbum();
    },
    
    _enterAlbum:function(){
        var timer="";
        
        autoPicWall();
        timer=setInterval(autoPicWall,4000);
        
    }
}

var picPage=0, //当前第几张图片正在进行放大或缩小。
    picLeft,
    picTop;
    
function autoPicWall(){
    var $pictureWallPic=$(".pictureWall div"),
        $own =$pictureWallPic.eq(picPage),
        isBig=$own.hasClass('bigCenter'),
        hasClassPicRow=$own.hasClass('picRow');
        
    becomeBig($own,hasClassPicRow);
    
    //图片放大后，间隔2秒自动缩小。
    setTimeout(becomeSmall($own,hasClassPicRow),2000);
    
    if(picPage<$pictureWallPic.length-1){
        picPage++;
    }else if(picPage == $pictureWallPic.length - 1){
        picPage=0;
    }
}
    
function becomeBig($own,hasClassPicRow){
    var $mask=$('.mask'),
        pictureWallWidth=$('.pictureWall').width(),
        pictureWallHeight=$('.pictureWall').height();
        
    picLeft=$own.css('left');
    picTop=$own.css('top');
    
    $own.toggleClass('bigCenter'); 
    $mask.fadeIn(); //显示遮罩层。
    //放大图片，移动div
    if(hasClassPicRow){
        for(var i = 120; i < 720; i+=20){
            $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
        }
    }else{
        for(var i = 80; i < 480; i+=20){
            $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
        }
    }
}

function becomeSmall($own,hasClassPicRow){
    var $mask = $(".mask"),
          pictureWallWidth = $(".picture-wall").width(),
          pictureWallHeight = $(".picture-wall").height();

    if(hasClassPicRow){
        for(var i = 720; i >= 120; i-=40){
            $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
            /* 图片缩小到中心位置 */
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
        }
    }else{
        for(var i = 480; i >= 80; i-=40){
            $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
            /* 图片缩小到中心位置 */
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
        }
    }
    
    /* 图片缩小到中心位置后，回到原始位置 */
    $own.animate({"left": picLeft, "top": picTop},400,function(){
        $mask.fadeOut(); /* 隐藏遮罩层 */
        $own.toggleClass("bigCenter"); /* 去除放大的class属性 */
    });
}

$(function(){
    sceneObject.init();
});

总结

      需要下载源代码的直接去原作者软文里下。http://www.cnblogs.com/tattoo/p/4500329.html