前端开发 实现图片分裂的效果

网页前端外包开发流程图|网页开发前端与后端接口|美国道富前端开发面试

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>网站前端开发项目实战:图片分裂效果</title>
    <style>
        html {
            overflow: hidden;
        }
        body {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .img {
            position: absolute;
            cursor: pointer;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
        }
        .frame {
            position: absolute;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div id=”images”>
        <img src=”u=3303599948,2388752934&fm=21&gp=0.jpg” alt=”” />
    </div>
    <script>
        var src;
        function div(o) {
            function img(x, y) {
                var d = document.createElement(“div”);//创建div标签
                d.className = “frame”;
                d.style.left = 50 * x + “%”;
                d.style.top = 50 * y + “%”;
                var img = document.createElement(“img”);//创建img标签
                img.className = “img”;
                img.src = src[Math.floor(Math.random() * src.length)].src;
                img.onmousedown = new Function(“div(this.parentNode);this.parentNode.removeChild(this);”);
                //添加标签
                d.appendChild(img);
                o.appendChild(d);
            }
            img(0, 0);
            img(1, 0);
            img(0, 1);
            img(1, 1);
        }
        onload = function () {
            src = document.getElementById(“images”).getElementsByTagName(“img”);
            div(document.body);
        }
    </script>
</body>
</html>

ws前端开发工具|前端平时都用什么开发工具|网站前端开发业务总结

» 本文来自:前端开发者 » 《前端开发 实现图片分裂的效果》
» 本文链接地址:https://www.rokub.com/4484.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!