动态生成div逢十折行

来源：互联网发布：qq三国转职js转疾风编辑：程序博客网时间：2024/05/14 08:38

效果图

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .bg{            width: 600px;            height: 600px;            background: url(img/pic.jpg);            position: relative;        }        .bg div{            width: 60px;            height: 60px;            background: #ccc;            /*border: 1px solid #fff;*/            position: absolute;        }    </style></head><body>    <div id="bg" class="bg">    </div>    <script type="text/javascript">    var oTab=document.getElementById('bg');    var aDiv=oTab.getElementsByTagName('div');    /*第一步动态生成100个div    第二步逢十折行    第三步当鼠标浮动到它身上时它就消失*/    for(var i=0;i<100;i++){            oTab.innerHTML+='<div></div>';    }    for(var i=0;i<100;i+=10){        for(var j=0;j<10;j++){            aDiv[i+j].style.left=60*j+'px';            aDiv[i+j].style.top=6*i+'px';        }    }    for(var i=0;i<100;i++){        aDiv[i].onmouseover=function(){            this.style.background='none';            this.style.border='1px solid #fff';        }    }    </script></body></html>

阅读全文

0 0