Javascript特效：照片墙-CFANZ编程社区

Javascript特效：照片墙

知识点

CSS 中 box-shadow可以添加阴影效果
！important CSS最高优先级

运行效果

Javascript特效：照片墙_css

点击后

Javascript特效：照片墙_html_02

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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 10px #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;
        }
    </style>
</head>
<body>
<ul id="ps"></ul>
</body>
<script src="UnderScore.js"></script>
<script>
    window.onload = function (ev) {
        // 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 screenHeight = document.documentElement.clientHeight - 250;
        var screenWidth = document.documentElement.clientWidth - 360;

        // 5. 遍历
        for (var j = 0; j < allLis.length; j++) {
            // 5.1 取出单个li标签
            var liCurrent = allLis[j];

            // 5.2 随机分布
            liCurrent.style.left = _.random(0, screenWidth) + 'px';
            liCurrent.style.top = _.random(0, screenHeight) + 'px';

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

            // 5.4 监听点击事件
            liCurrent.onclick = function () {
                for (var i = 0; i < allLis.length; i++) {
                    allLis[i].className = '';
                }
                this.className = 'current';
            }
        }
    }
</script>
</html>

0 条评论