Функция пеемещает квадратик (div#test) по экрану из левого верхнего угла в правый нижний.
Попробова добавить интервал - задержку перед перемещением - не получается. Консоль ругается - "Operation is not supported
var elemWidth = window.getComputedStyle(elem,null).getPropertyValu e('width');"
В чем может быть дело?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
#test {
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
function moveObject(element) {
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var elem = document.getElementById(element);
var elemWidth = window.getComputedStyle(elem,null).getPropertyValue('width');
elemWidth = parseInt(elemWidth);
var elemHeight = window.getComputedStyle(elem,null).getPropertyValue('height');
elemHeight = parseInt(elemHeight);
var top = window.getComputedStyle(elem,null).getPropertyValue('top');
top = parseInt(top);
var left = window.getComputedStyle(elem,null).getPropertyValue('left');
left = parseInt(left);
var count = 1;
var timeout = setTimeout(arguments.callee, 2000);
for(top,count; top <= screenHeight - elemHeight; top = top + elemHeight,count++) {
if(!count % 2 == 0) {
for(left; left <= screenWidth - elemWidth; left = left + elemWidth) {
elem.style.left = left + 'px';
console.log(elem.style.left + '/');
timeout;
}
}
if(count % 2 == 0) {
for(left; left >= elemWidth; left = left - elemWidth) {
elem.style.left = left + 'px';
console.log(elem.style.left + '//');
timeout;
}
}
console.log(elem.style.top + '///');
elem.style.top = top + 'px';
timeout;
}
}
moveObject('test');
</script>
</body>
</html>