jquery动画效果浏览图片_jquery 加载图片效果 animate-优快云博客

本文链接：https://blog.youkuaiyun.com/u014067713/article/details/69053568

今天看了陶国荣老师写的《jquery权威指南》这本书关于动画效果的章节，对最后的测试案例感受颇深。

案例要求：不同尺寸的照片先以缩略图的形式统一显示在页面中，然后点击任意图片进行查看，图片会动态放大，点击缩小后图片会动态缩小，如果有一张图片已经处于放大状态，则放大另一张图片的时候该张放大的图片会自定缩小。

该案例主要学习animate()函数的使用方法$(selector).animate(styles,options).

测试代码中由于在遍历所有元素时并没有等待图片加载完成就记录了图片的width和height属性，因此这样可能会得到意想不到的效果，一下代码是在原代码基础上稍作修改，在图片全部load结束后在加载图片信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览图片</title>
    <script src="jquery-2.1.1.js"></script>
    <style type="text/css">
        .p_List{
            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{
            text-align: center;
            display:none;
        }

        /*缩略图中点击放大的链接样式*/
        .p_Big{
            display:block;
            width:90px;
            height:23px;
            cursor:pointer;
        }
        /*关闭按钮的样式*/
        .p_Cls{
            position:absolute;
            right:10px;
            bottom:10px;
            display:block;
            width:90px;
            height:21px;
        }
    </style>
</head>
<body>
    <div class="p_List">
        <img src="img/001.jpg"/>
        <div class="p_Alt">
            <h3>风景1</h3>
        </div>
    </div>
    <div class="p_List">
        <img src="img/002.jpg"/>
        <div class="p_Alt">
            <h3>风景2</h3>
        </div>
    </div>
    <div class="p_List">
        <img src="img/003.jpg"/>
        <div class="p_Alt">
            <h3>风景3</h3>
        </div>
    </div>
    <div class="p_List">
        <img src="img/004.jpg"/>
        <div class="p_Alt">
            <h3>风景4</h3>
        </div>
    </div>
<script>
    $(document).ready(function(){
        var curIndex = -1;
        intImgL = "-120px";
        intImgT = "-120px";

        $(".p_List").each(function(index){
            var $this = $(this);
            var $img = $this.find("img");
            var $info = $this.find(".p_Alt");
            $img.load(function(){
                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 = $("<button class='p_Big'>点击放大</button>").appendTo($this);
                var $clos = $("<button class='p_Cls'>点击关闭</button>").appendTo($info);

                //保存放入元素后的外框Div的长与宽
                arrPic.dragw = $drag.width();
                arrPic.dragh = $drag.height();
                //放大按钮单击事件
                $open.click(function(){
                    $this.animate({
                        width       : arrPic.imgW,
                        height      : (arrPic.imgH + 85),
                        borderWidth : "5"
                    },3000);
                    $open.fadeOut();
                    $(".p_Alt",$this).fadeIn();
                    $drag.animate({
                        width    : arrPic.imgW,
                        height   : arrPic.imgH
                    },3000);
                    $img.animate({
                        marginLeft : "0px",
                        marginTop  : "0px"
                    },3000);
                    //获取当前被放大成原始图片的图片各组成部分
                    var $f_this = $(".p_List: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;
                });

                function cls_Click(pF,pO,pW,pI,blnS){
                    var $strInit;
                    pF.animate({
                        width       : arrPic.orgW,
                        height      : arrPic.orgH,
                        borderWidth : "1"
                    },3000);
                    pO.fadeIn();
                    if(blnS){
                        $strInit = $(".p_Alt",pF);
                    }
                    else{
                        $strInit = blnS;
                    }

                    $strInit.fadeOut();
                    pW.animate({
                        width  : arrPic.dragw,
                        height : arrPic.dragh
                    },3000);
                    pI.animate({
                        marginTop    : intImgT,
                        marginLeft   : intImgL
                    },3000);
                }
            });
        });
    })
</script>
</body>
</html>