Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2014, 14:53
Новичок на форуме
Отправить личное сообщение для alexander123456789 Посмотреть профиль Найти все сообщения от alexander123456789
 
Регистрация: 15.06.2014
Сообщений: 3

Видимая область картинки
Помогите сделать.
На странице несколько слоев картинок. Есть место под фотографию определенного размера. Надо чтобы, если фотография меньше этого размера, то область, которая не входит была невидима. А мышкой двигать фотографию в этой области
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2014, 15:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alexander123456789,
поиск ->Jquery Image Zoom Plugin
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2014, 15:54
Новичок на форуме
Отправить личное сообщение для alexander123456789 Посмотреть профиль Найти все сообщения от alexander123456789
 
Регистрация: 15.06.2014
Сообщений: 3

Спасибо.
Но надо, чтобы при нажатии мышкой картинку можно было двигать, а при отпускании, она фиксировалась в последнем положении
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2014, 17:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Перемещение большой картинки в границах див
alexander123456789,

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title>Это картинка</title>
  <style type="text/css">
  *{margin:0;padding:0}
    body{background:#FFBA66}
    .wrapper{width:760px;height:325px;overflow:hidden;border:#8696B0 8px solid;border-radius:8px;position:relative;margin:20px auto 5px}
    .map{width:1200px;height:700px;position:relative;left:-200px;cursor:move}
    .map img{width:100%;height:100%}
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="map"><img src="http://i.artfile.ru/1920x1200_675899_[www.ArtFile.ru].jpg"></div>
  </div>
  <div class="wrapper">
    <div class="map"><img src="https://www.clinicient.com/wp-content/uploads/community-service_forest.jpg"></div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script> <script type="text/javascript">
      $('.map').draggable(
          {
          drag: function (event, ui) {
              var h = $(this).parent().height() - $(this).height(),
              w = $(this).parent().width() - $(this).width();
              ui.position.left > 0 && (ui.position.left = 0);
              ui.position.top > 0 && (ui.position.top = 0);
              ui.position.left < w && (ui.position.left = w);
              ui.position.top < h && (ui.position.top = h);
            }
          }
        )
  </script>
</body>
</html>

Последний раз редактировалось рони, 04.11.2017 в 22:11.
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2014, 18:03
Новичок на форуме
Отправить личное сообщение для alexander123456789 Посмотреть профиль Найти все сообщения от alexander123456789
 
Регистрация: 15.06.2014
Сообщений: 3

Не плачь. Спасибо большое. Не ожидал, что помогут
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пож с JSON, передача id ссылки. wisma jQuery 22 10.02.2014 15:36
Плавное появление картинки в слайд-шоу Alex351960 Элементы интерфейса 1 08.08.2013 17:01
Идентифицировать картинки MellDixX Общие вопросы Javascript 8 04.08.2013 18:16
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42