Тема: плавне переміщення зображення в точку натиску миші
привіт. Намагаюся зробити наступне:
Є картинка яка плавно переміщається по координатах х та у в точку де було нажато мишкою.
Зроблено так що вона просто переміщається в цю точку (зникає з початкової і зявляється в кінцеві точці), а як зробити плавний перехід в цю точку?
Ось код:
<?php
$date = date("H:i:s");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><<<Singo>>></title>
<link rel="shortcut icon" href="../img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="index.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<button id='returnBtn'>на место</button>
<img id='test' src='user.png'/>
<script type='text/javascript'>
var img = document.getElementById('test'),
defX = 50, defY = 50;
document.body.onclick = function(event) {
event = event || window.event;
setPosition(img, event.clientX, event.clientY);
}
document.getElementById("returnBtn").onclick = function(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
setPosition(img, defX, defY);
}
function setPosition(obj, x, y) {
obj.style.left = x+'px';
obj.style.top = y+'px';
}
</script>
</body>
</html>
