很有意思的圖片分裂複製效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>很有意思的圖片分裂效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
width: 100%;
height: 100%;
}
.img{
position:absolute;
cursor: pointer;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.frame {
position: absolute;
width: 50%;
height: 50%;
}
</style>
<script type="text/javascript">
var src;
function div(o){
function img(x,y){
var d = document.createElement("div");
d.className = "frame";
d.style.left = 50*x+"%";
d.style.top = 50*y+"%";
var img = document.createElement("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>
</head>
<body>
<div id="images" style="display:none">
<img src="logo_demo2.gif">
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章