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

全栈程序员站长

发布于 2022-07-06 14:20:05

1K0

发布于 2022-07-06 14:20:05

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是全栈君。

照片库

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>