第一步 初始化 25 个div

// 模块化编程思想 将初始化图片放在init()函数里
function init(){

// 获取类名为gallary的div, 作为放图片的容器
var gallary = $(".gallary");

// 使用for循环将每张图片添加在div容器里
    for(var i = 0; i < 25; i ++){
        var x = i % 5; // 取余, 根据i计算行内的图片序列
        var y = parseInt(i / 5); // 整除, 根据i计算纵向的图片序列
        $("<div class='item'><div class='pic'></div></div>")  //设置背景图和前景图的布局
            .css({
                left: x * 196 + "px",   // 根据变量x的值计算每张图片在x轴的偏移量, 平移设置每张图片的位置
                top: y * 100 + "px"
            })
            .appendTo(gallary); 
    }
}

第二步 点击切换大图小图

var items = $(".item");
var isShowAll = false; // 是否显示所有图片

// 如果显示全部图片,则点击显示大图
items.click(function(){
    if(isShowAll){
        var index = items.index(this);
        showPic(index);
    } else {
// 如果是显示大图, 则点击显示所有图片
        showAll();
    }
    isShowAll = !isShowAll; 
});

第三步 显示所有图片

function showAll(){
// 隐藏后切图再显示
$(".item")
.each(function(i){
$(this).animate({"opacity": 0.1}, Math.random()*2700+300, "linear", function(){
// 显示小图
$(this).css({"background-size": "cover"}).css({"background-image": "url('img/"+i+".jpg')"})
}).animate({"opacity":1})
})
}

第四步 隐藏后再显示图片

function showItem(index) {
                // 隐藏后切图再显示
                $(".item")
                .each(function(i){
                    $(this).animate({"opacity":0.1}, Math.random()*2700+300, "linear", function(){
                        var x = i % 5;
                        var y = parseInt(i / 5);
                        $(this).css("background-image", "url(img/"+index+".jpg)")
                        .css({"background-size": "auto"})
                        .css("background-position", x*25+"% "+y*25+"%"); //100/(5-1)
                    }).animate({"opacity":1}, "slow")
                })
            }

第五步 隐藏图片

// hide(0)递归 逐个隐藏DIV
// 隐藏第index个div
        function hide(index){
                $(".item").eq(index).animate({"opacity": 0.1}, 500, "linear", function(){
                    if (index+1>=25)
                        return;
                    // index + 1 消失
                    hide(index+1);
                });
            }

第六步 延迟隐藏图片

使用delay 实现顺序隐藏

function hide(){
                $(".item")
                .each(function(i){
                    $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                });
            }
            function hide(){
                $(".item")
                        .each(function(i){
                            $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                        });
            }
            function hide(){
                $(".item")
                        .each(function(i){
                            $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                        });
            }
        })

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.0.js" ></script>


        <style type="text/css">
            body{
                background: black;
            }

            .center {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .gallary {
                width: 980px;
                height: 500px;
            }

            .item{
                width: 196px;
                height: 100px;
                /*background: red;*/
                /*float: left;*/

                position: absolute;

            }
        </style>

        <script type="text/javascript">
        $(function(){
            var isShowAll = true;

            init();
            showItem(18);
            showAll();


            function init(){
                var $gallary = $(".gallary");
                for(var i = 0; i < 25; i++){
                    var x = (i % 5) * 196;
                    var y = parseInt(i / 5) * 100;

                    $("<div class='item'></div>").css({
                        "left": x + "px",
                        "top": y + "px"
                    })
                    .appendTo($gallary);
                }


                $(".item").click(function(){
                    if (isShowAll){
                        // 显示一张图
                        var index = $(this).index();
                        showItem(index);

                    } else {
                        // 显示全部图片
                        showAll();
                    }

                    isShowAll = !isShowAll;

//                    hide(0);        
//                    hide();
                });
            }

            function showAll(){
//                $(".item").css({"background-size": "cover"}).each(function(i){
//                    $(this).css({"background-image": "url('img/"+i+".jpg')"})
//                })

                // 隐藏后切图再显示
                $(".item")
                .each(function(i){
                    $(this).animate({"opacity": 0.1}, Math.random()*2700+300, "linear", function(){
                        // 显示小图
                        $(this).css({"background-size": "cover"}).css({"background-image": "url('img/"+i+".jpg')"})
                    }).animate({"opacity":1})
                })
            }

            function showItem(index) {
//                $(".item").css("background-image", "url(img/"+index+".jpg)")
//                .css({"background-size": "auto"})
//                .each(function(i){
//                    var x = i % 5;
//                    var y = parseInt(i / 5);
//                    $(this).css("background-position", x*25+"% "+y*25+"%"); //100/(5-1)
//                })

                // 隐藏后切图再显示
                $(".item")
                .each(function(i){
                    $(this).animate({"opacity":0.1}, Math.random()*2700+300, "linear", function(){
                        var x = i % 5;
                        var y = parseInt(i / 5);

                        $(this).css("background-image", "url(img/"+index+".jpg)")
                        .css({"background-size": "auto"})
                        .css("background-position", x*25+"% "+y*25+"%"); //100/(5-1)
                    }).animate({"opacity":1}, "slow")
                })
            }

            // hide(0)递归 逐个隐藏DIV
            // 隐藏第index个div
            function hide(index){
                $(".item").eq(index).animate({"opacity": 0.1}, 500, "linear", function(){
                    if (index+1>=25)
                        return;

                    // index + 1 消失
                    hide(index+1);
                });
            }

            // hide()延迟 逐个隐藏DIV
            function hide(){
                $(".item")
                .each(function(i){
                    $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                });
            }
            function hide(){
                $(".item")
                        .each(function(i){
                            $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                        });
            }
            function hide(){
                $(".item")
                        .each(function(i){
                            $(this).delay(100*i).animate({"opacity": 0.1}, 500, "linear");
                        });
            }
        })
        </script>

    </head>
    <body>
        <div class="gallary center">
        </div>
    </body>
</html>

## 作业

http://www.jq22.com/yanshi4546

results matching ""

    No results matching ""