动态生成div逢十折行

最新推荐文章于 2023-10-02 09:08:07 发布

VLilyV

最新推荐文章于 2023-10-02 09:08:07 发布

阅读量582

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/VLilyV/article/details/72302857

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图

<!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>