前端开发者网页前端外包开发流程图|网页开发前端与后端接口|美国道富前端开发面试
html 代码
<!DOCTYPE html>
<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前端开发工具|前端平时都用什么开发工具|网站前端开发业务总结
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册