1

Тема: плавне переміщення зображення в точку натиску миші

привіт. Намагаюся зробити наступне:
Є картинка яка плавно переміщається по координатах х та у в точку де було нажато мишкою.
Зроблено так що вона просто переміщається в цю точку (зникає з початкової і зявляється в кінцеві точці), а як зробити плавний перехід в цю точку?
Ось код:

<?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>

2

Re: плавне переміщення зображення в точку натиску миші

можна використовувати анімацію за допомогою jquery http://api.jquery.com/animate/, а можна використовувати таймери, і в таймері вже змінювати позицію, але тут, звісно, треба прораховувати кожну точку, по котрій має проїхатись ваш елемент http://learn.javascript.ru/settimeout-s … etinterval

Подякували: Faraon1

3

Re: плавне переміщення зображення в точку натиску миші

FakiNyan написав:

можна використовувати анімацію за допомогою jquery http://api.jquery.com/animate/, а можна використовувати таймери, і в таймері вже змінювати позицію, але тут, звісно, треба прораховувати кожну точку, по котрій має проїхатись ваш елемент http://learn.javascript.ru/settimeout-s … etinterval

Дякую.

4

Re: плавне переміщення зображення в точку натиску миші

Прочитав те що написав... і зрозумів що це повна маячня))) Вирішив описати проблему спочатку.
Намагаюся зробити плавне переміщення обєкта (в мому випадку це є картинка) в точку де було нажато клавішою миші. Здається я зробив все правильно, але все одно виходить лажа. Коли користувач перший раз кликає по любих координатах (точка 1) мишкою то нічого не відбувається... чому я незнаю!??? Коли він кликає другий раз (точка 2) то обєкт переміщається по координатах де ми клацнули мишкою перший раз, а потім переміщається по координатах куди ми клацнули мишкою другий раз. Якщо користувач нажав клавішу миші в третій раз то обєкт спочатку переміщається в точку 1 потім в точку 2, а аж потім в точку 3 і так далі... Чому при кожному клиці обєкт спочатку обходить всі попередні точки де було нажато мишкою?
код:

  <style rel="stylesheet" type="text/css">

#pers_xy {
    position: absolute;
    width: 19px;
    height: 43px;
    left: 50px;
    top: 50px;
}


  </style>
<div id=mapa>

<img id='pers_xy' src='img/user.png'/>
<script type='text/javascript'>

var img = document.getElementById('pers_xy'); 
document.getElementById("mapa").onclick = function(event) {

    setPosition(img, event.clientX, event.clientY);
}
    
 function setPosition(obj, x, y) {
    var min_left = document.getElementById('left').offsetWidth; //отримуЇм ширину блоку ¤ку потр≥бно не враховувати в перем≥щенн¤ обЇкта
    var min_top = document.getElementById('top_right').offsetHeight; //отримуЇм висоту блоку ¤ку потр≥бно не враховувати в перем≥щенн¤ обЇкта
    
    $( "#mapa" ).click(function() {
        $( "#pers_xy" ).animate({
            left: (x - min_left - 13)+'px',
            top: (y - min_top - 42)+'px'
        }, 5000);
    });

} 
</script>
</div>

5

Re: плавне переміщення зображення в точку натиску миші

може хтось прокоментує хоч якось... невже ніхто не знає в чому проблема?

6

Re: плавне переміщення зображення в точку натиску миші

все, розібрався (в коді). Все працює!
Ось оновлений Java код:

<script type='text/javascript'>

var img = document.getElementById('pers_xy'); 
document.getElementById("mapa").onclick = function(event) {

    setPosition(img, event.clientX, event.clientY);
}
    
 function setPosition(obj, x, y) {
    var min_left = document.getElementById('left').offsetWidth; //отримуЇм ширину блоку ¤ку потр?бно не враховувати в перем?щенн¤ обЇкта
    var min_top = document.getElementById('top_right').offsetHeight; //отримуЇм висоту блоку ¤ку потр?бно не враховувати в перем?щенн¤ обЇкта
    
        $( "#pers_xy" ).animate({
            left: (x - min_left - 13)+'px',
            top: (y - min_top - 42)+'px'
        }, 5000);

} 
</script>
Подякували: Chemist-i, quez2

7

Re: плавне переміщення зображення в точку натиску миші

А чому не виходило, вияснили?

Подякували: Faraon1

8 Востаннє редагувалося Faraon (21.12.2014 00:15:01)

Re: плавне переміщення зображення в точку натиску миші

quez написав:

А чому не виходило, вияснили?

Якщо чесно то не дуже(
я розумію це так... що проблема була в тому що я зайвий раз провіряв чи було нажато в області div id якого mapa

    $( "#mapa" ).click(function() {
        ...
    });

Хоча я ніяк не можу зрозуміти як воно запамятовувало попоредні координати клацання миші в результаті чого картинки через них всіх проходила.

9

Re: плавне переміщення зображення в точку натиску миші

Підкажіть будь ласка наступне.... є дві змінні в js x та y. Як значення цих змінних можна сохранити в базі, або присвоїти ці значення змінним на php? Я знаю що можна це зробити через get запроси які посилаються на js, але це не підходить. Як ще можна?

10

Re: плавне переміщення зображення в точку натиску миші

Ну тоді хоча б якусь підсказку дайте... посилання щоб я знав в яку сторону рити

11

Re: плавне переміщення зображення в точку натиску миші

відправити запит назад на сервер post чи get передавши ті змінні що хочте зберігти, а на сервері вже в базу записуйте те що прийшло в запиті.

12

Re: плавне переміщення зображення в точку натиску миші

GET-запити, зрозуміло, не підходять, тому що вам треба POST. Чи POST вам теж не підходить, і якщо так, чому?

13 Востаннє редагувалося Faraon (25.12.2014 00:04:10)

Re: плавне переміщення зображення в точку натиску миші

Все, питання закрите. Не хотів через гет запрос через те що щоб не виводилася інфа в урл, але вона й так не виводиться. Ось як в мене реалізовано плавне переміщення картинки в точку натичку миші. (код трішки підправив щоб він працював в усіх кому таке потрібно)

  <style rel="stylesheet" type="text/css">
#pers_xy {
    position: absolute;
    width: 19px;
    height: 43px;
    left: 50px;//початкові координати картинки
    top: 50px;//початкові координати картинки
}
  </style>

<div id=mapa>
<img id='pers_xy' src='img/user.png'/>

<script type='text/javascript'>
var img = document.getElementById('pers_xy'); 
document.getElementById("mapa").onclick = function(event) {

    setPosition(img, event.clientX, event.clientY);
}



 function setPosition(obj, x, y) {
 
      //плавний перехід від однієї точки координт до іншої
      $( "#pers_xy" ).animate({
            left: x +'px',
            top: y+'px'
            
        }, 5000);
        
             
    //отправка гет запита без перезагрузки сторінки
       $.ajax({
                type: "GET",
                url: "game.php",
                data: "x="+left_x+"&y="+top_y,
                //Виводим те що вернув PHP
                success: function(html) {
                        $("#result").empty();
                        $("#result").append(html);
                }
        });
        
        
        

  } 
</script>

</div>

14

Re: плавне переміщення зображення в точку натиску миші

Як можна реалізувати плавне переміщення обєкту в точку натиску миші з одинаковою швидкістю переміщення незалежно від відстані?
Тому що в мене переміщується в любу точку незалежно від відстані  за одинаковий час який я вказав (5сек), а це не айс)

      //плавний перехід від однієї точки координт до іншої
      $( "#pers_xy" ).animate({
            left: x +'px',
            top: y+'px'
            
        }, 5000);

Допоможіть будь ласка. Реально ідеї закінчилися)

15

Re: плавне переміщення зображення в точку натиску миші

Взяти в руки математику і розрахувати час:

  1. Знайдіть відстань між точками.

  2. Поділіть її на деяку швидкість.

  3. Впишіть її замість отих ваших 5000.

Подякували: Faraon1

16

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Взяти в руки математику і розрахувати час:

  1. Знайдіть відстань між точками.

  2. Поділіть її на деяку швидкість.

  3. Впишіть її замість отих ваших 5000.

я це знаю...
1) відстань я знайшов.

    var vidstan = Math.sqrt(x*x + y*y); //вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат
    //вводжу змінну st для того щоб уникнути в майбутньому відємної змінної vidstan
    if(vidstan < 0)
        var st = -1;
    else 
        var st = 1;

2) а як розрахувати швидкість? я пробував розбивати на 100частин відстань, але це погана іде і нічого не дає

    var speed = ((vidstan / 100)*500) *  st; 

3)

      //плавний перехід від однієї точки координт до іншої
      $( "#pers_xy" ).animate({
            left: left_x +'px',
            top: top_y+'px'
            
        }, speed);

17

Re: плавне переміщення зображення в точку натиску миші

Я не зовсім розумію, як відстань може бути від’ємною. В крайньому разі візьміть модуль.

Нащо ви розбиваєте відстань на частини? Спробуйте просто помножити відстань, скажімо, на 20 або 50 і використати це число як час.

Подякували: Faraon1

18

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Я не зовсім розумію, як відстань може бути від’ємною. В крайньому разі візьміть модуль.

Нащо ви розбиваєте відстань на частини? Спробуйте просто помножити відстань, скажімо, на 20 або 50 і використати це число як час.

справді... ми ж координати точки вираховуємо від точок (0,0), а не від місця розміщення обєкту. За це дякую.
Я помножив на 20

    var vidstan = Math.sqrt(x*x + y*y); //вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат
    var speed = vidstan * 20; 
      //плавний перехід від однієї точки координт до іншої
      $( "#pers_xy" ).animate({
            left: left_x +'px',
            top: top_y+'px'
            
        }, speed);

але все одно обєкт переміщується з різною швидкістю залежно від велечини змінної vidstan, а мені потрібно щоб обєкт переміщався з одинаковою швидкістю не залежно від відстані.

19

Re: плавне переміщення зображення в точку натиску миші

Це досить дивно.

Що являють собою ваші x та y? Я підозрюю, що це координати персонажа. Якщо це так, то ваша формула знаходить відстань до початку координат.

Подякували: Faraon1

20

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Це досить дивно.

Що являють собою ваші x та y? Я підозрюю, що це координати персонажа. Якщо це так, то ваша формула знаходить відстань до початку координат.

точно, туплю)))) Дякую.