JavaScript 照片墙特效

最新推荐文章于 2023-04-06 14:00:59 发布

原创最新推荐文章于 2023-04-06 14:00:59 发布 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #CSS

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用JavaScript、HTML和CSS创建一个具有照片随机旋转、倾斜及点击后居中放大的照片墙效果。提供了一个简单的代码示例和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

照片随机旋转、随机倾斜，点击照片后居中放大展示。

效果展示：
初始情况：

点击照片后：

资源下载：照片墙特效
照片墙特效目录布局

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }

        html, body, ul {
            width: 100%;
            height: 100%;
        }

        #ps {
            position: relative;
        }

        #ps li {
            width: 250px;
            height: 360px;
            box-shadow: 0 0 20px #000;
            position: absolute;

            transition: all 1s;
        }

        #ps li.current {
            left: 50% !important;
            top: 50% !important;
            transform: rotate(0deg) translate(-50%, -50%) scale(1.5, 1.5) !important;
            z-index: 99;
        }

        #ps li img {
            width: 250px;
            height: 360px;
        }
    </style>
</head>
<body>
   <ul id="ps"></ul>
<script src="js/underscore-min.js"></script>
<script>
    window.onload = function () {
        // 1.获取需要的标签
        var ps = document.getElementById("ps");

        // 2.动态创建li标签
        for(var i=0; i<10; i++){
            // 2.1 创建li标签
            var li = document.createElement("li");
            ps.appendChild(li);

            // 2.2 创建img标签
            var img = document.createElement("img");
            img.src = "images/pic" + (i + 1) + ".jpg";
            li.appendChild(img);
        }

        // 3.获取所有的li
        var allLis = ps.children;

        // 4.求出屏幕的宽度和高度
        var screenW = document.documentElement.clientWidth - 250;
        var screenH = document.documentElement.clientHeight - 360;

        // 5.遍历
        for(var i=0; i<allLis.length; i++){
            // 5.1 去除单个li标签
            var li = allLis[i];

            // 5.2 随机分布
            li.style.left = _.random(0, screenW) + "px";
            li.style.top = _.random(0, screenH) + "px";

            // 5.3 随机角度
            li.style.transform = "rotate(" + _.random(0, 360) + "deg)";

            // 5.4 监听点击事件(排他思想)
            li.onclick = function () {
                for(var j=0; j<allLis.length; j++){
                    allLis[j].className = '';
                }
                this.className = "current";
            }

        }
    }
</script>
</body>
</html>