动态生成div逢十折行

ゝ一世哀愁。 2022-06-16 13:36 112阅读 0赞

![效果图][SouthEast]

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

[SouthEast]: /images/20220616/eb5a1c3c904e4462b8c8d86212291856.png

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关给div动态添加样式

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

旧城等待，/ 2022年08月27日 11:57/ 0 赞/ 234 阅读

相关 HTML页面内块级元素内折行显示

我们知道，浏览器会在块级元素结束后自动添加上换行符，但是如果我们想在块级元素内部实现折行显示，此时我们该怎么做呢？这时我们可以借用一下<br>标签，这个标签可用于

た入场券/ 2022年08月21日 11:58/ 0 赞/ 248 阅读

相关 js动态增加行删除行

//动态增加行 function addRow(tab){ var title = ""; var table = document.get

叁歲伎倆/ 2022年08月07日 05:53/ 0 赞/ 164 阅读

相关根据 Session 动态显示 div

需求，根据后台传来的数据，在页面动态的展示 div。例子，传到前台的参数为数字 i 时，页面第 i 个 div 显示，其他 div 不显示。方式

待我称王封你为后i/ 2022年07月14日 05:08/ 0 赞/ 123 阅读

相关 div折行 table折行问题

css控制自动换行,防止表格或div等被撑开\[折行\] style=" table-layout: fixed; word-break: break-all; w

素颜马尾好姑娘i/ 2022年07月11日 01:48/ 0 赞/ 129 阅读

相关动态生成div逢十折行

![效果图][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta cha

ゝ一世哀愁。/ 2022年06月16日 13:36/ 0 赞/ 113 阅读

相关动态改变div位置

var item\_id =$(this).attr("data-id"); var num = item\_id-1; var px=

朴灿烈づ我的快乐病毒、/ 2022年06月07日 10:11/ 0 赞/ 197 阅读

相关 div同行实现或div自动换行

float:left同行显示使用"float:left"时，div会影响下一个div。"float:left"会让下一个div排在右边，当前div排在左边。同行显

红太狼/ 2022年04月24日 13:04/ 0 赞/ 316 阅读

相关 css 折行

style=\\"word-wrap:break-word;width:200px;\\" ![20190326151151739.png][] [2019032

小鱼儿/ 2022年02月27日 01:40/ 0 赞/ 201 阅读

相关 Iview table 中Tooltip 折行显示效果

{ title: '服务状态监控', slot: 'date7', align: 'center

﹏ヽ暗。殇╰゛Y/ 2022年02月15日 10:23/ 0 赞/ 267 阅读