Показать часть изображения

Question

Как я могу показать часть изображения, используя jQuery или другой метод JavaScript?

Пример:

image:
[                ]
[     --------   ]
[     -      -   ]
[     - part -   ]
[     -      -   ]
[     --------   ]
[                ]

Answer 1

Управление свойством CSS background, например this :

#imgDiv {
    background-image: url(image.jpg);
    background-position: 10px 50px; /* Visible coordinates in image */
    height: 200px; /* Visible height */
    width: 200px; /* Visible width */
}

Вот как .animate видимая часть: http://jsfiddle.net/wGpk9/2/

Answer 2

Вы можете использовать div с фиксированным размером и разместить изображение абсолютно внутри.Затем вы можете использовать JavaScript, чтобы изменить верхнюю / левую / правую / нижнюю позицию изображения, чтобы переместить его.

<div style="width: 100px; height: 50px; position: relative"> 
  <img src="path" alt="something" id="image"  
      style="position: absolute; top: 0px; left: 0px" />
</div>

...
<script type="text/javascript">
function moveImage() {
   document.getElementById('image').style.top = '-100px';
}
</script>

РЕДАКТИРОВАТЬ: если вы хотите переместить изображение во времени ... В противном случае просто используйте CSS

Answer 3

Пример Ивана работает, если вы добавляете переполнение стиля: скрыто в div, вот так ..