实现图片分割---产生多个div分割图片 使用for和二维数组来设置背景定位
时间:2014-10-25 17:21:36
收藏:0
阅读:217
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:832px;height:832px;margin:0 auto;border:1px solid red;}
.col{width:50px;height:50px;border:1px solid #fff;float:left;background:url(xin.jpg) no-repeat;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box");
var rowDiv=[];
var tArray=new Array();
for(var i=0;i<16;i++)
{
tArray[i]=new Array();
for(var j=0;j<16;j++)
{
rowDiv[j]=document.createElement("div");
box.appendChild(rowDiv[j]);
rowDiv[j].className="col";
tArray[i][j]=rowDiv[j];
var l=-(j*50)+"px";
var T=-(i*50)+"px";
tArray[i][j].style.backgroundPositionX=l;
tArray[i][j].style.backgroundPositionY=T;
}
}
</script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:832px;height:832px;margin:0 auto;border:1px solid red;}
.col{width:50px;height:50px;border:1px solid #fff;float:left;background:url(xin.jpg) no-repeat;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box");
var rowDiv=[];
var tArray=new Array();
for(var i=0;i<16;i++)
{
tArray[i]=new Array();
for(var j=0;j<16;j++)
{
rowDiv[j]=document.createElement("div");
box.appendChild(rowDiv[j]);
rowDiv[j].className="col";
tArray[i][j]=rowDiv[j];
var l=-(j*50)+"px";
var T=-(i*50)+"px";
tArray[i][j].style.backgroundPositionX=l;
tArray[i][j].style.backgroundPositionY=T;
}
}
</script>
原文:http://blog.csdn.net/xiaomogg/article/details/40454015
评论(0)