JavaScript 百叶窗效果
🌙
手机阅读
本文目录结构
代码第一部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百叶窗效果的布局</title>
<style>
#container{
width: 816px;
height: 582px;
position: relative;
background: orange;
}
#container div{
display: block;
position: absolute;
background: url("img/zhume.jpg") repeat 0 0;
}
</style>
</head>
<body>
<img src="img/zhume.jpg" alt="图片"/>
<div id="container"></div>
</body>
</html>
<script>
/*下面是百叶窗，布局*/
var container=document.getElementById("container");
var rows=5;
var cols=10;
var w=container.offsetWidth/cols;//每个DIV的宽；
var h=container.offsetHeight/rows;//每个DIV的宽；
for(var i= 0,len=rows*cols;i<len;i++){
var oDiv=document.createElement("div");
container.appendChild(oDiv);
/* i%cols;//这是列号；
Math.floor(i/cols);//这是行号；*/
var l=i%cols*w;
var t=Math.floor(i/cols)*h;
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
oDiv.style.height=h+"px";
oDiv.style.width=w+"px";
oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位；
}
</script>
代码第二部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百叶窗效果</title>
<style>
#container{
width: 816px;
height: 434px;
position: relative;
background: orange;
}
#container div{
display: block;
position: absolute;
background: url("img/zhume.jpg") repeat 0 0;
}
#btn1{width: 100px;height: 30px;position: absolute;left: 716px;top:450px;}
</style>
</head>
<body>
<div id="container"></div>
<input type="button" value="按钮1" id="btn1"/>
</body>
</html>
<script src="starMove.js"></script>
<script>
/*下面是百叶窗，布局*/
var container=document.getElementById("container");
var rows=3;
var cols=10;
var w=container.offsetWidth/cols;//每个DIV的宽；
var h=container.offsetHeight/rows;//每个DIV的宽；
var a=[];
for(var i= 0,len=rows*cols;i<len;i++){
var oDiv=document.createElement("div");
container.appendChild(oDiv);
var l=i%cols*w;
var t=Math.floor(i/cols)*h;
oDiv.t=t;//把最终的目的地保存在自定义属性上；
oDiv.l=l;
oDiv.style.height=h+"px";
oDiv.style.width=w+"px";
oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位；
//通过设置left和top把DIV隐藏起来
if(Math.floor(i/cols)===0){
oDiv.style.left=-1000+l+"px";
oDiv.style.top=-500+t+"px";
}else if(Math.floor(i/cols)===1){
oDiv.style.left=-1000+l+"px";
oDiv.style.top=t+"px";
}else if(Math.floor(i/cols)===2){
oDiv.style.left=-1000+l+"px";
oDiv.style.top=500+t+"px";
}
/*DIV放到数组里*/
a.push(oDiv);
}
var oBtn1=document.getElementById("btn1");
oBtn1.onclick=function(){
for(i=0,len= a.length;i<len;i++){
(function(i){
setTimeout(function(){
starMove(a[i],{left:a[i].l,top:a[i].t},600,9)
},i%cols*100)
})(i)
}
};
</script>
