您的位置：首页 > 其它

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

2015-09-18 09:30 423 查看

照片库

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>

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

标签：

相关文章推荐

新的分享

章节导航

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

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