本次练习错误总结:
1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动。
2. if条件语句里面是双等号,不是单等号(赋值)。
3. 坐标值没有Right,只能offsetLeft 加减。
//oDiv.style.right = oDiv.offsetRight + 10 + 'px';
<style> div{ width: 100px; height: 100px; background-color: #ccc; /* border: 1px solid #000; */ position:absolute; /* 没写绝对定位。。。。。。div不能移动。。。 */ } </style> <script> document.onkeydown = function(ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); // if(oEvent.keyCode = 39) //赋值是一个等号,if里面是双等号 == if(oEvent.keyCode == 39) { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } else if(oEvent.keyCode == 37) { //oDiv.style.right = oDiv.offsetRight + 10 + 'px'; //没有右边值。。。。 只能offsetLeft 加减。 oDiv.style.left = oDiv.offsetLeft - 10 + 'px'; } }; </script>
function getPos(ev) {
// var oEvent = ev||event; 这里是否需要这个变量? 不需要
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return { x:ev.clientX + scrollLeft, y:ev.clientY + scrollTop}
};
document.onmousemove = function (ev) {
var oEvent = ev||event;
var pos = getPos(oEvent);
var aDiv = document.getElementsByTagName('div');
for(var i=aDiv.length-1; i>0; i--){
aDiv[i].style.left = aDiv[i-1].offsetLeft + 'px';
aDiv[i].style.top= aDiv[i-1].offsetTop + 'px';
}
aDiv[0].style.left = pos.x + 'px';
aDiv[0].style.top = pos.y + 'px';
};