javascript - 想讓圖片上那個(gè)塊，在增加塊的寬度的時(shí)候向右邊移動(dòng)，而不是向左邊移動(dòng)。需要怎么解決？
問(wèn)題描述
<!DOCTYPE html><html><head> <title></title> <mata http-equiv=”content-type” content=”text/html; charset=gb2312” /> <style type='text/css'>* { margin: 0; padding: 0; font-size: 14px; font-family: '微軟雅黑';} </style></head><body> <p style='width:30px; height:30px;background:#808080; '></p> <p style='width:30px; height:30px;background:#808080; margin-left:170px; '></p> <p style='width:30px; height:30px;background:#808080; position:absolute;left:140px;top:200px;padding-left:0;'></p> <p style='width:30px; height:30px;background:#808080; position:absolute;top:170px'></p></body></html><script type='text/javascript'> setInterval(change, 5); function change() {var p1 = document.getElementById(’p1’);var p2 = document.getElementById(’p2’);var p3 = document.getElementById(’p3’);var p4 = document.getElementById(’p4’);var x = parseInt(p1.style.width);console.log(x);if (x<200) { x++;}p1.style.width = x + 'px';if (x =='200') { var y = parseInt(p2.style.height); if (y<200) { y++; } p2.style.height = y + 'px'; } if (y == '200') { var z = parseInt(p3.style.width); if (z < 200) { z++; } p3.style.width = z + 'px';} }</script>
問(wèn)題解答
回答1：由于，HTML內(nèi)坐標(biāo)系是從左往右是X軸，從上到下是Y軸。你的第三條邊，實(shí)際上是從紅點(diǎn)開(kāi)始延長(zhǎng)的一個(gè)長(zhǎng)方形：
由于，第三條邊是從正方形p3延長(zhǎng)而來(lái)，而由于你增加了正方形的寬度，又因?yàn)槠聊粡淖笙蛴覟閄軸正方向，所以寬度增加正方形會(huì)向右延長(zhǎng)成長(zhǎng)方形。而如果你要讓這個(gè)變長(zhǎng)的效果“看起來(lái)”是在向左移動(dòng)，那么就要在每一次變長(zhǎng)的同時(shí)，將紅點(diǎn)向左移動(dòng)相同的距離。
所以，對(duì)于p3的操作應(yīng)該這樣寫(xiě)：
if (y == '200') { var z = parseInt(p3.style.width); if (z < 200) {z++; } p3.style.marginLeft = (-z + 30) + ’px’; // 加上上面一句，至于為什么是-z + 30 // 其實(shí)是-(z - 30) // 因?yàn)椋痉綁K的寬度就是30， // 那么，在X軸正方向（寬度增量就是z - 30） // 由于寬度向右伸長(zhǎng)了z - 30 // 所以將左邊距設(shè)置為-(z - 30)，來(lái)抵消這個(gè)向右伸長(zhǎng)的增量 // 所以，看起來(lái)就是在向左移動(dòng) // 實(shí)際上是伸長(zhǎng)以后將整個(gè)圖形同時(shí)向左移相應(yīng)的距離 // 而并非是實(shí)際向左伸長(zhǎng) p3.style.width = z + 'px';}
效果圖：
由于，HTML內(nèi)坐標(biāo)系是從左往右是X軸，從上到下是Y軸。你的第三條邊，實(shí)際上是從紅點(diǎn)開(kāi)始延長(zhǎng)的一個(gè)長(zhǎng)方形：
由于，第三條邊是從正方形p3延長(zhǎng)而來(lái)，而由于你增加了正方形的寬度，又因?yàn)槠聊粡淖笙蛴覟閄軸正方向，所以寬度增加正方形會(huì)向右延長(zhǎng)成長(zhǎng)方形。而如果你要讓這個(gè)變長(zhǎng)的效果“看起來(lái)”是在向左移動(dòng)，那么就要在每一次變長(zhǎng)的同時(shí)，將紅點(diǎn)向左移動(dòng)相同的距離。
所以，對(duì)于p3的操作應(yīng)該這樣寫(xiě)：
if (y == '200') {
var z = parseInt(p3.style.width);if (z < 200) { z++;}p3.style.marginLeft = (-z + 30) + ’px’;// 加上上面一句，至于為什么是-z + 30// 其實(shí)是-(z - 30)// 因?yàn)椋痉綁K的寬度就是30，// 那么，在X軸正方向（寬度增量就是z - 30）// 由于寬度向右伸長(zhǎng)了z - 30// 所以將左邊距設(shè)置為-(z - 30)，來(lái)抵消這個(gè)向右伸長(zhǎng)的增量// 所以，看起來(lái)就是在向左移動(dòng)// 實(shí)際上是伸長(zhǎng)以后將整個(gè)圖形同時(shí)向左移相應(yīng)的距離// 而并非是實(shí)際向左伸長(zhǎng)p3.style.width = z + 'px';
}效果圖：
網(wǎng)公網(wǎng)安備