js笔记(1)实现方格照片墙

1.css初始化

<style type="text/css"> *{margin: 0;padding: 0;} </style>

目的是消除html与body的宽度

2.js代码部分，生成元素及控制

<script type="text/javascript"> //创建div for (var i = 0; i<10; i++){ for(var j = 0; j<10; j++){ var all_div = document.createElement('div'); //给予样式 all_div.style.width = '50px'; all_div.style.height = '50px'; all_div.style.background = 'black'; all_div.style.position = 'absolute'; all_div.style.left = 50*j+'px'; all_div.style.top = 50*i+'px'; all_div.style.border = '1px solid white'; //消除与显示 all_div.style.opacity = '0'; all_div.onmouseover = function(){ this.style.opacity = '1'; } //加入元素 document.body.appendChild(all_div); } } </script>

3.解释代码

（1）一共需要100个div，直接在body中手写不现实，通过create与appendchild进行添加

（2）需要的是10行10列的方块，直接在一个for循环中写100难以实现，就用类似于矩阵的方式实现

（3）position 选择absolute更便于排版

（4）在absolute后，top和left就将像素数50倍增加

（5）opacity控制div的显示

4.使用图片

<style type="text/css"> *{margin: 0;padding: 0;} div{background: url(xwq.jpg);} </style> <script type="text/javascript"> //all_div.style.background = 'black'; all_div.style.backgroundPosition = -j*50+'px '+-i*50+'px'; </script>

这是代码中需要做出改变的地方