В javascript не знаток, но есть код, надо чтобы один объект взаимодействовал с другим, т.е чтобы при нажатии левого смайла он двигался, как заденет правого, правый начинает двигаться вверх. Вот код
<b><html>
<head><title>Линейное движение картинки</title>
<style>
#train{
position: relative;
cursor: pointer;
}
#tr{
position: relative;
cursor: pointer;
}
</style>
<img id="train" src="https://upload.wikimedia.org/wikipedia/en/c/c1/WikiFun_Police_Smiley.png" alt='strelka2' width='25' height='25'>
<img id="tr" src="https://upload.wikimedia.org/wikipedia/en/c/c1/WikiFun_Police_Smiley.png" alt='strelka2' align='right' width='25' height='25'>
<script>
train.onclick = function() {
var start = Date.now(); // сохранить время начала
var timer = setInterval(function() {
// вычислить сколько времени прошло из opts.duration
var timePassed = Date.now() - start;
train.style.left = timePassed / 5 + 'px';
if (timePassed > 7000) clearInterval(timer);
}, 20);
}
tr.onclick = function() {
var startt = Date.now(); // сохранить время начала
var timerr = setInterval(function() {
// вычислить сколько времени прошло из opts.duration
var timePassedd = Date.now() - startt;
tr.style.bottom = timePassedd / 5 + 'px';
if (timePassedd > 5300) clearInterval(timerr);
}, 20);
}
</script>
</body>
</html>
Простой