前端小练习：jQuery实现酷炫照片墙

最新推荐文章于 2024-05-12 17:47:11 发布

illion-78

最新推荐文章于 2024-05-12 17:47:11 发布

阅读量794

点赞数

分类专栏：前端（demo）文章标签： jquery

本文链接：https://blog.csdn.net/weixin_39233022/article/details/105280277

版权

前端（demo）专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery酷炫照片墙

效果展示：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>photo</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrapper">
        <ul class="wrapul">

        </ul>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

css代码：

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #cecece;
}

.wrapul {
    width: 70%;
    height: 70%;
    position: relative;
    margin: 50px auto;
    /* border: 1px solid black; */
}

.wrapul li {
    transform-style: preserve-3d;
    position: absolute;
    /* border: 1px solid black; */
    background-color: #ffffff;
}

.box {
    width: 100%;
    height: 100%;
    /* ç¼©æ”¾ */
    transform: scale(0.9);
}

img {
    width: 100%;
    height: 100%;
}

jQuery代码：

var wrapul = $('.wrapul');
// 取css值
var wrapW = parseInt(wrapul.css('width'));
var wrapH = parseInt(wrapul.css('height'));
var liW = wrapW / 5;
var liH = wrapH / 5;
createDom();

function createDom() {
//利用for循环插入图片
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5; j++) {
            $('<li><div class = "box" ><img src=""></div></li>')
                .css({//使每张图片旋转一定的角度
                    'width': liW + 'px',
                    'height': liH + 'px',
                    'left': j * liW,
                    'top': i * liH,
                    'transform': 'scale(0.9) rotate(' + (Math.random() * 50 - 30) + 'deg)' +
                        'translateX(' + (3 * j - 60) + 'px)' +
                        'translateY(' + (30 * i - 60) + 'px)' +
                        'translateZ(' + Math.random() * 500 + 'px)'
                })
                //找到每张图片的地址
                .find('img').attr('src', './img/' + (i * 5 + j) + '.jpg')
                .end()
                //把li放到ul中去
                .appendTo(wrapul);
        }
    }
    bindEvent();
}
//图片点击事件
function bindEvent() {
    var change = true;
    wrapul.find('li').on('click', function() { //绑定事件
        if (change) {
            //小图变大图
            //这里的this为li，找到点击该图片的地址
            var bgImg = $(this).find('img').attr('src');
            var bgLeft = 0,
                bgTop = 0;
            $('li').each(function(index) {
                var $this = $(this);
                
                //让旋转的图片回到原位
                $this.delay(10 * index).animate({ 'opacity': 1 }, 200, function() { //回归到原位
                    $this.css({
                        'transform': 'rotate(0deg)' +
                            'translateX(0px)' +
                            'translateY(0px)' +
                            'translateZ(0px)'
                    });
                    $this.find('.box').css({
                        'transform': 'scale(1)'
                    });
                    //变成一张大图
                    $this.find('img').attr('src', bgImg).css({
                        'position': 'absolute',
                        'width': wrapW + 'px',
                        'height': wrapH + 'px',
                        'left': -bgLeft,
                        'top': -bgTop
                    });
                    bgLeft += liW;
                    if (bgLeft >= wrapW) {
                        bgTop += liH;
                        bgLeft = 0;
                    }
                    //显示
                    $this.animate({ 'opacity': 1 }, 200);
                })

            })
            change = false;
        } else {
            //大图变小图
            change = true;
            //inde = i * 5 + j;
            $('li').each(function(index) {
                var j = index % 5;
                var i = Math.floor(index / 5);
                var $this = $(this);
                //再次点击，从一张大图变成若干个小图，整齐排列
                $(this).animate({ 'opacity': 1 }, 200, function() {
                    $(this).find('img').css({
                        'position': 'absolute',
                        'width': '100%',
                        'height': '100%',
                        'left': 0,
                        'top': 0
                    });
                    $this.find('img').attr('src', './img/' + index + '.jpg');
                    //旋转角度
                    $(this).css({
                        // 'width': liW + 'px',
                        // 'height': liH + 'px',
                        // 'left': j * liW,
                        // 'top': i * liH,
                        'transform': 'scale(0.9) rotate(' + (Math.random() * 50 - 30) + 'deg)' +
                            'translateX(' + (3 * j - 60) + 'px)' +
                            'translateY(' + (30 * i - 60) + 'px)' +
                            'translateZ(' + Math.random() * 500 + 'px)'
                    });
                    $this.find('.box').css({
                        'transform': 'scale(0.9)'
                    });
                })

            })

        }
    })


}

方法	解释
transform	transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。W3scool
Math.random()	产生随机数。编程狮
translate	绘图函数编程狮
attr	attr() 方法设置或返回被选元素的属性和值。编程狮
animate	animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。编程狮

illion-78

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端小练习：jQuery实现酷炫照片墙

jQuery酷炫照片墙效果展示：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫