<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; } #box{ 400px; height: 400px; background-color: blue; top: 100px; left: 300px; } #box > div{ background-color: yellow; height: 1px; } #word{ color: blue; display: block; 200px; height: 200px; position: absolute; top: 100px; left: 100px; z-index: 1; font: 200px/200px '楷体'; } </style> </head> <body> <div id="box"> <span id="word">恩</span> </div> <script type="text/javascript"> var i = 1; function createH(){ if(i<=200){ var width = i*2+'px'; var left = (200-i)+'px'; }else{ var width = (400-(i-200)*2)+'px'; var left = (i-200)+'px'; } i++; var h = document.createElement('div'); h.style.width = width; h.style.left = left; h.style.top = (i-2)+'px'; return h; } function add(){ if(i===400){ clearInterval(iA); return false; } var h = createH(); document.getElementById('box').appendChild(h); } var iA = setInterval(add,10); </script> </body> </html>
这个例子是博客园上面看到的,拿下来。只是让自己有空看下别人好的想法,只要有好的想法javascript就能让页面飞起来