jquery照片墙

最新推荐文章于 2021-07-23 12:08:37 发布

微aa

最新推荐文章于 2021-07-23 12:08:37 发布

阅读量144

点赞数 2

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/ttttqqqqq/article/details/107990727

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

可以直接copy，但是记得创建img文件夹，里面放上1.jpg - 8.jpg 八张图片
同时，也必须引入jquery的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            background-color: gainsboro;
            overflow: hidden;
        }
        div{
            margin: 5% auto;
            width: 80%;
            height: 80vh;
        }
        img{
            float: left;
            box-sizing: border-box;
            border: 5px solid white;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        function tiao(){
            // 将图片放入div中
            for(var i = 0;i<4;i++){
                // 一开始就要隐藏                                                                                 // 先隐藏
                $("div").append("<img src='img/"+(2*i+1)+".jpg' ><img src='img/"+(2*i+2)+".jpg' >").find("img").css({"display":"none"});
            }
            // 设置所有图片的样式
            for(var i = 0;i<8;i++){
                $("img").eq(i).css({
                    // css3样式，设置旋转角度
                    transform:"rotate(" + Math.floor(Math.random()*40+20) + "deg)",
                    height: "50%",
                    width:"25%"
                    // 后显示
                }).fadeIn(4000);
            }
            $("img").click(function () {
                // 自身内容覆盖div原始内容
                $("div").html(this).find("img:last").css({
                    transform:"rotate(0deg)",
                    width:"auto",
                    height:"100%"
                }).click(function(){
                    // 清空样式
                    $("div").html("");
                    // 重绘界面
                    tiao()
                    // 先隐藏，后显示
                }).css({"display":"none"}).fadeIn(4000)
            })
        }
        tiao()
    </script>
</body>
</html>

效果如下：
在这里插入图片描述