例题复习

代码如下:

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('');

}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180415G1B43100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券