代码如下:
Document
#table{
border:1pxsolid black;
table-layout: fixed;
}
td{
border:1pxsolid black;
padding:30px;
}
input[type=number] {
width:60px;
}
背景图套入栅格
载入带有若干小图的大背景图,改变栅格行列数,使得栅格可以完好切分各小图。
选择背景图:
栅格大小:行,列
单元格宽:, 高:
varimgWidth,imgHeight;
$(function(){
//$('#table')
//assertEqual(1, 2)
assertEqual(genTRTD(1,1),'',genTRTD(1,1));
assertEqual(genTRTD(2,2),'');
fillTable();
$('#tu').change(getPic);
$('#rows, #cols').change(fillTable);
});
functiongetPic(){
//取出 tu 中的 文件名,放入 table 中作背景
console.log('getPic')
varfileName=$('#tu').val();
fileName=fileName.slice(fileName.lastIndexOf('\\')+1);
varimg=newImage();//创建一个图对象
img.src=fileName;
img.onload=function() {
// 当 img.src 的图像文件调入后,执行这里
varw=img.width,h=img.height;
imgWidth=w;
imgHeight=h;
calcDim();
$('#table').css({
'background-image':'url('+fileName+')',
width:w,
height:h
});
}
}
functioncalcDim() {
if(!imgWidth) {
return;
}
varrows=$('#rows').val();
varcols=$('#cols').val();
$('#w').html(parseInt(imgWidth/cols) );
$('#h').html(parseInt(imgHeight/rows) );
}
functionfillTable() {
varrows=$('#rows').val();
varcols=$('#cols').val();
vartrtd=genTRTD(rows,cols);//'...'
$('#table').html(trtd);
calcDim();
}
functiongenTRTD(rows, cols) {
varbuf=[]
for(varr=;r
buf.push('');
for(varc=;c
buf.push('');
}
buf.push('')
}
returnbuf.join('');
}
领取专属 10元无门槛券
私享最新 技术干货