首页 > 代码库 > 实现图片分割---产生多个div分割图片 使用for和二维数组来设置背景定位
实现图片分割---产生多个div分割图片 使用for和二维数组来设置背景定位
<!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>
实现图片分割---产生多个div分割图片 使用for和二维数组来设置背景定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。