动画效果浏览相册中的图片

需求如下：
（1）将尺寸不同的相片同意成宽度与高度相同的缩略图片，展示在页面中。
（2）当单机“点击放大”链接时，以动画的效果放大至其原始图片，同时，隐藏“点击放大”链接，显示该图的基本信息。
（3）当单机元素图片中的“关闭”按钮时，以动画的效果将图片缩小成单机前的缩略图，即返回发哦图片初始状态。
（4）在浏览放大后的原始图片时，又单机其他缩略图片，那么，处于放大状态的原始图片自动以动画的效果进行关闭，使得整个相册始终只有一个图片处于放大状态。

代码如下：

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css_Animate.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="js_Animate.js" type="text/javascript"></script>
</head>
<body>
    <div class="p_Lst">
        <img src="images/001.jpg" alt="" />
        <div class="p_Alt">
            <h3>图片1</h3>
        </div>
    </div>
    <div class="p_Lst">
        <img src="images/002.jpg" alt="" />
        <div class="p_Alt">
            <h3>图片2</h3>
        </div>
    </div>
    <div class="p_Lst">
        <img src="images/003.jpg" alt="" />
        <div class="p_Alt">
            <h3>图片3</h3>
        </div>
    </div>
    <div class="p_Lst">
        <img src="images/004.jpg" alt="" />
        <div class="p_Alt">
            <h3>图片4</h3>
        </div>
    </div>
</body>
</html>

CSS

body {font-size:13px}
/*图片外框样式*/
.p_Lst {
    position: relative;
    /*float: left;*/
    width: 90px;
    height: 98px;
    padding: 8px;
    border: 1px solid #666;
    margin: 10px 8px 20px 8px;
}
/*图片最近外框样式*/
.p_Img {
    width: 90px;
    height: 90px;
    margin-bottom: 5px;
    overflow: hidden;
}
/*图片信息样式*/
.p_Alt {
    display:none;
}
/*缩略图片中“点击放大”链接样式*/
.p_Big {
    display: block;
    width: 90px;
    height: 23px;
    background: url(images/imgLarge.jpg);
    cursor: pointer;
}
/*原始放大图片中“关闭”按钮样式*/
.p_Cls {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: block;
    width: 20px;
    height: 21px;
    background: url(images/imgClose.jpg);
    text-indent: -9999px;
}

View Code

/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>

$(function() {
    var curIndex = -1; //初始化当前打开图片值
    var intImgL = "-120px";
    var intImgT = "-120px";
    //带参数index遍历图片外框Div
    $(".p_Lst").each(function(index) {
        var $this = $(this); //获取每个外框Div
        var $img = $this.find("img"); //查找其中的图片元素
        var $info = $this.find(".p_Alt"); //查询其中的图片信息元素
        var arrPic = {}; //定义一个空数组保存初始的长与宽
        arrPic.imgw = $img.width();
        arrPic.imgh = $img.height();
        arrPic.orgw = $this.width();
        arrPic.orgh = $this.height();
        $img.css({ //设置初始时的图片外边距位置
            marginLeft: intImgL,
            marginTop: intImgT
        });
        //将图片、点击放大链接、关闭按钮放入外框Div中
        var $drag = $("<div class='p_Img'>").append($img).prependTo($this);
        var $open = $("<a href='javascript:void(0)' class='p_Big' title='点击放大'></a>").appendTo($this);
        var $clos = $("<a href='javascript:void(0)' class='p_Cls' title='点击关闭'></a>").appendTo($info);
        //保存放入元素后的外框Div的长与宽
        arrPic.dragw = $drag.width();
        arrPic.dragh = $drag.height();

        //放大按钮单击事件 
        $open.click(function() {
            $this.animate({ //外框动画
                 arrPic.imgw,
                height: (arrPic.imgh + 85), //85是图片信息的高度,
                borderWidth: "5"
            }, 3000);
            $open.fadeOut(); //点击放大链接淡出
            $(".p_Alt", $this).fadeIn(); //图片提示信息淡入
            $drag.animate({ //加入图片后的Div框动画
                 arrPic.imgw,
                height: arrPic.imgh
            }, 3000);
            $img.animate({ //以动画的形式自动调整位置
                marginTop: "0px",
                marginLeft: "0px"
            }, 3000);
            //获取当前被放大成原始图的图片各组成部分
            var $f_this = $(".p_Lst:eq(" + curIndex + ")");
            var $f_open = $(".p_Big:eq(" + curIndex + ")");
            var $f_drag = $(".p_Img:eq(" + curIndex + ")");
            var $f_larg = $(".p_Alt:eq(" + curIndex + ")");
            var $f_imgs = $("img:eq(" + curIndex + ")");
            if (curIndex != -1) { //如果当前有已放大的图片
                //自动以动画的形式关闭该图片
                cls_Click($f_this, $f_open, $f_drag, $f_imgs, $f_larg);
            }
            //重新获取当前放大图片的索引号
            curIndex = index;
        });

        //关闭按钮单击事件
        $clos.click(function() {
            //以动画的形式缩小当前所点击的图片
            cls_Click($this, $open, $drag, $img, 1);
            //初始化索引号
            curIndex = -1;
        });

        /*
        *@param 参数pF表示图片最外层Div
        *@param 参数pO表示图片点击前的放大按钮
        *@param 参数pW表示紧邻图片层Div
        *@param 参数pI表示紧选中的图片元素
        *@param 参数blnS表示图片中的说明内容
        */
        function cls_Click(pF, pO, pW, pI, blnS) {
            var $strInit;
            pF.animate({
                 arrPic.orgw,
                height: arrPic.orgh,
                borderWidth: "1"
            }, 3000);
            pO.fadeIn();
            if (blnS) {
                $strInit = $(".p_Alt", pF);
            } else {
                $strInit = blnS;
            }
            $strInit.fadeOut();
            pW.animate({
                 arrPic.dragw,
                height: arrPic.dragh
            }, 3000);
            pI.animate({
                marginTop: intImgT,
                marginLeft: intImgL
            }, 3000);
        }
    });
})

View Code

结果如下图所示：

高否？富否？帅否？否？滚去学习！