分享你我的心得.
共乘一片美好网络.

无限图片分裂代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fractal-1</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  margin: 0px;
  padding: 0px;
  background: #000;
  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%;
 }
 #credit {
  position: absolute;
  color: #000;
  font-family: arial;
  font-size: 0.8em;
  width: 99%;
  text-align: right;
  bottom: 2px;
  z-index: 10000;
 }
 a {text-decoration: none;color:#fff;}
 a:hover {text-decoration: none;background:#ff8000;color:#fff;}
 a:visited {text-decoration: none;color:#fff;}
 a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}

</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="http://www.lanrentuku.com/images/uppic/200805220819290.jpg">
 <img src="http://www.lanrentuku.com/images/uppic/200805220819290.jpg">
 <img src="http://www.lanrentuku.com/images/uppic/200805220819290.jpg">
 <img src="http://www.lanrentuku.com/images/uppic/200805220818410.jpg">
</div>

<div id="credit">
 ·home: <a href="http://www.dhteumeuleu.com/" target="_self" title="Interactive DHTML demos">www.dhteumeuleu.com </a>
 ·source: <a href="http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=fractal-F.html" target="_self" title="source code">code</a>
</div>

</body>
</html>

赞(0)
未经允许不得转载:小叶白龙博客 » 无限图片分裂代码
分享到: 更多 (0)

评论 38

评论前必须登录!