图片切割工具—产生多个div切割图片采用for和一的二维阵列设置背景位置

全栈程序员-站长 • 2022年1月12日上午9:00 • 未分类 • 阅读 40

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

照片库

1.二维函数写法【效果展示】

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
body{background:#939393;}
#box{width:800px;height:800px;margin:0 auto;background:url(11.jpg);overflow: hidden;}
.col{width:50px;height:50px;outline:1px solid #fff;float:left;background:url(00.jpg) no-repeat;opacity:0;filter:alpha(opacity:0);}
</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.backgroundPosition =l+” “+T;
tArray[i][j].onmouseover = function ()
{
this.style.opacity = “1”;
this.style.filter=”alpha(opacity:100)”;
}
}

}
</script>

2.字符串写法【效果展示】

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
body{background:#939393;}
#box{width:800px;height:800px;margin:0 auto;background:url(11.jpg);overflow: hidden;}
.col{width:50px;height:50px;outline:1px solid #fff;float:left;background:url(00.jpg) no-repeat;opacity:0;filter:alpha(opacity:0);}
</style>
</head>
<script type=”text/javascript” src=”jquery-1.10.1.min.js”></script>
<body>
<div id=”box”></div>
</body>
</html>
<script type=”text/javascript”>
var box=document.getElementById(“box”);
var col=box.getElementsByTagName(“div”);
var rowDiv=[];
var bg_P=[];
var str=””;
for(var i=0;i<16;i++)
{
for(var j=0;j<16;j++)
{
str+='<div class=”col” style=”background-position:’+-(j*50)+’px ‘+-(i*50)+’px”></div>’;
}
}
box.innerHTML=str;
for(var i=0;i<col.length;i++)
{
col[i].onmouseover=function(){
this.style.opacity=”1″;
this.style.filter=”alpha(opacity:100)”;
}
}
</script>