Форум

j0hnik · #11 (**permalink**) 09.08.2017, 00:05

может если мышь в края упирается двигать картинку потихой??

рони · #12 (**permalink**) 09.08.2017, 00:53

CodeMonk3y,
может быть вы хотели так ...

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;

      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
      var width = $("#map").width();
      var height = $("#map").height();
      $("body").mousemove(function(event){
      var left = (width - $(window).width()) * event.pageX/$(window).width()
      var top = (height - $(window).height())* event.pageY/$(window).height()
      $("#map").css({left: -left, top: -top});

      });
})

    </script>
  </body>
</html>

CodeMonk3y · #13 (**permalink**) 12.08.2017, 13:29

Сообщение от рони

CodeMonk3y,
может быть вы хотели так ...

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;

      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
      var width = $("#map").width();
      var height = $("#map").height();
      $("body").mousemove(function(event){
      var left = (width - $(window).width()) * event.pageX/$(window).width()
      var top = (height - $(window).height())* event.pageY/$(window).height()
      $("#map").css({left: -left, top: -top});

      });
})

    </script>
  </body>
</html>

Спасибо за помощь. Я отложил проблему на пару дней, но она еще актуальна. Нет, так не хотел бы. Хотел бы реализовать движение изображения, как двигается карта в яндекс-картах. Глупый вопрос, но может где-то можно найти исходники яндекс-карт? В исходниках мне нужен лишь ответ на один вопрос "какой алгоритм движения яндекс-карт"

рони · #14 (**permalink**) 12.08.2017, 13:40

Сообщение от CodeMonk3y

как двигается карта в яндекс-картах

и где это можно увидеть?

j0hnik · #15 (**permalink**) 12.08.2017, 14:24

Рони "захват по клику" в як да и гугл картах тоже.

рони · #16 (**permalink**) 12.08.2017, 16:15

https://javascript.ru/forum/job/2876...tml#post183237

Сообщение от Gvozd

продолжает равномерное движение в том же направлении куда двигали, на такое же расстояние(по модулю)
если нужно четко заданное расстояние, то просто нужно немного посчитать

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    overflow: hidden;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
  $('#map').draggable({
    start: function(event, ui) {$(this).stop()},
    stop: function(ev, data) {
        var coef = 1.0
        var left = (data.position.left - data.originalPosition.left) * coef;
        var top = (data.position.top - data.originalPosition.top) * coef;
        $(this).animate({
          left: '+=' + left,
          top: '+=' + top
        }, 800, 'easeInSine');
      }
})
});
  </script>
</head>

<body>
<img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript