javascript - 想讓圖片上那個塊，在增加塊的寬度的時候向右邊移動，而不是向左邊移動。需要怎么解決？
問題描述
<!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>
問題解答
回答1：由于，HTML內坐標系是從左往右是X軸，從上到下是Y軸。你的第三條邊，實際上是從紅點開始延長的一個長方形：
由于，第三條邊是從正方形p3延長而來，而由于你增加了正方形的寬度，又因為屏幕從左向右為X軸正方向，所以寬度增加正方形會向右延長成長方形。而如果你要讓這個變長的效果“看起來”是在向左移動，那么就要在每一次變長的同時，將紅點向左移動相同的距離。
所以，對于p3的操作應該這樣寫：
if (y == '200') { var z = parseInt(p3.style.width); if (z < 200) {z++; } p3.style.marginLeft = (-z + 30) + ’px’; // 加上上面一句，至于為什么是-z + 30 // 其實是-(z - 30) // 因為，原本方塊的寬度就是30， // 那么，在X軸正方向（寬度增量就是z - 30） // 由于寬度向右伸長了z - 30 // 所以將左邊距設置為-(z - 30)，來抵消這個向右伸長的增量 // 所以，看起來就是在向左移動 // 實際上是伸長以后將整個圖形同時向左移相應的距離 // 而并非是實際向左伸長 p3.style.width = z + 'px';}
效果圖：
由于，HTML內坐標系是從左往右是X軸，從上到下是Y軸。你的第三條邊，實際上是從紅點開始延長的一個長方形：
由于，第三條邊是從正方形p3延長而來，而由于你增加了正方形的寬度，又因為屏幕從左向右為X軸正方向，所以寬度增加正方形會向右延長成長方形。而如果你要讓這個變長的效果“看起來”是在向左移動，那么就要在每一次變長的同時，將紅點向左移動相同的距離。
所以，對于p3的操作應該這樣寫：
if (y == '200') {
var z = parseInt(p3.style.width);if (z < 200) { z++;}p3.style.marginLeft = (-z + 30) + ’px’;// 加上上面一句，至于為什么是-z + 30// 其實是-(z - 30)// 因為，原本方塊的寬度就是30，// 那么，在X軸正方向（寬度增量就是z - 30）// 由于寬度向右伸長了z - 30// 所以將左邊距設置為-(z - 30)，來抵消這個向右伸長的增量// 所以，看起來就是在向左移動// 實際上是伸長以后將整個圖形同時向左移相應的距離// 而并非是實際向左伸長p3.style.width = z + 'px';
}效果圖：
網公網安備