Как реализовать просмотр изображения с помощью кнопок с эффектом затухания внутри изображения - PullRequest
Новая
       10

Как реализовать просмотр изображения с помощью кнопок с эффектом затухания внутри изображения

1 голос
/ 21 апреля 2011

Я разрабатываю приложение для просмотра изображений . Я уже реализовал механизм просмотра с помощью стандартных текстовых привязок вне изображения.

Теперь я хотел бы реализовать механизм просмотра «внутри» изображения. Давайте сделаем это ясно. Пользователь видит изображение и при событии onMouseOver , в зависимости от того, с какой стороны изображения идет указатель, отображается стрелка соответственно справа или слева. При событии onClick в правой или левой части изображения пользователь должен иметь возможность перейти к предыдущему / следующему изображению. Для просмотра не нужно нажимать на стрелку.

Теперь я знаю, что эту функцию можно реализовать с помощью Javascript, особенно для этого в фреймворке jQuery есть несколько интересных функций. Я придерживаюсь этого подхода:

  1. Создайте контейнер div для изображения и поместите тег <img> внутрь.

  2. Определите положение для навигационных стрелок внутри контейнера.

  3. После события onMouseOver вызвать функцию jquery, которая помещает изображение стрелки в положение, определенное на шаге 2.

  4. Используйте некоторую функцию fading для реализации эффекта замирания.

  5. При нажатии кнопки вызова функции просмотра изображений уже реализованы.

Мои сомнения в основном о:

Q1) Является ли мой подход (выше перечисленных пунктов) правильным?

Q2) Как мне отрегулировать положение стрелок просмотра в зависимости от размера изображения?

Q3) Как jQuery может «понять», является ли пользователь onMouseOver или onClicked в левой или правой части изображения?

Хотя все ответы приветствуются, я не прошу простой код скопировать, вставить и настроить в моем приложении, но я хотел бы знать, верен ли мой подход и есть ли пара полезных jQuery (или любой другой JS-среды) функции для реализации этой функциональности.

1 Ответ

1 голос
/ 21 апреля 2011

Q1: Ваш подход идет в правильном направлении.

Q2: С помощью jQuery вы можете считывать ширину элемента или позиционировать элемент стрелки с помощью position:absolute; right:20px ... но отметьте Q3 ->

Q3: в вашем переходе определите два отдельных divs, один на правой половине, а другой на левой половине поверх изображения. Таким образом, структура может быть: 

<div class="image-wrapper">
   <img src="somthing.jpg"/>
   <div class="navigation-overlay">
      <div class="left-arrow></div>
      <div class="right-arrow"></div>
   </div>
</div>
...