很有意思的圖片分裂復制效果_圖片特效特效

很有意思的圖片分割效果，你可以點擊任意一個圖片，會看到圖片會成對分裂復制，無限制下去，就像鏈式反應一樣，運行一下，看看效果吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>很有意思的圖片分裂效果</title>
<meta http-equiv="mrc-Type" mrc="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   class="nz7n7h7"   id="images" style="display:none">
<img src="http://p1.mb5u.com/texiao/1/20110225160459259.gif">
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-12-06

[收藏][報錯][返回列表]

相關圖片特效特效：

很有意思的圖片分裂復制效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些