您的位置：首页 > Web前端 > JavaScript

盖房子

2016-07-13 08:36 375 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
.wrap{
width:
800px;
height:
500px;
border:
1px solid black;
margin:
0 auto;
position:
relative;
}
.row{
position:
absolute;
bottom:
0;
left:
0;
}
.row>div{
width:
20px;
height:
20px;
border:
1px solid deeppink;
background-color: mediumspringgreen;
float:
left;
box-sizing:
border-box;
}
</style>
</head>
<body>
<div
class="wrap">

</div>
<script
type="text/javascript">
// 先获取oWrap
var
oWrap = document.getElementsByClassName("wrap")[0];
// 创建oRow节点，类型div
var
oRow = document.createElement("div");

oWrap.appendChild(oRow);

oRow.setAttribute("class","row");
var
aDivs = [];
// 创建20个小div，将创建完成的div添加为oRow的给子节点
for
(var i = 1; i
<= 20; i++) {
aDivs[i]
= document.createElement("div");
oRow.appendChild(aDivs[i]);
}

var
maxWidth = oWrap.clientWidth - oRow.offsetWidth;
var
timer = null;
clearInterval(timer);
var
speed = 1;
timer =
setInterval(function(){
if
(oRow.offsetLeft >= maxWidth ||
oRow.offsetLeft < 0) {
speed
= speed * -1;
}
oRow.style.left
= oRow.offsetLeft + speed
+'px';
},20)

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 盖房子 js

相关文章推荐

新的分享

章节导航