Можете ли вы накладывать фотографии друг на друга на веб-странице?

Я хочу создать сайт, Что такое "одевалки" игра, где вы можете нажать на различные аксессуары, и они будут слой поверх друг друга.

потому что это немного сложно описать, я нашел эти примеры, которые, надеюсь, подчеркнут то, что я пытаюсь сделать:

У меня есть сотни различных аксессуаров в качестве изображений прямо сейчас, и (подобно игре выше) мне нужно поддерживать возможность выбора более одного. Поэтому мне нужно решение, которое не требует от меня предварительного сохранения изображения каждого проникновения комбинаций аксессуаров поверх принцессы (так как это были бы миллионы предопределенных изображений).

В идеале я хотел бы Javascript/jQuery или CSS решение, но будет принимать любые предложения, которые есть у людей. Flash-предложения также были бы полезны.

Итак, мои вопросы:

  • как пример сайт, совместив все изображения друг на друга? Кажется, я не могу найти код CSS или Javascript, который это делает?
  • есть какие-либо предложения о том, как построить этот тип веб-сайта (ссылки, учебники и примеры кода было бы здорово)?

7 ответов


короткий ответ-да.

есть много способов справиться с этим. С помощью HTML / CSS вы можете легко бросать элементы друг на друга.

HTML-код:

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS:

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

Итак, давайте посмотрим, что здесь важно. У вас есть 3 изображения в HTML-документе (imga, imgb и imgc). Чтобы наложить их, вы должны сначала установить их позиция to абсолютное чтобы изображения игнорировали поведение макета по умолчанию. Затем, вы можете использовать левый и top свойство для определения координат x, y элементов img соответственно. В приведенном выше примере все элементы накладываются в левом верхнем углу страницы. Для управления тем, какое изображение заканчивается сверху, вы можете использовать z-index свойства вот так:

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

это сделает imgc появись впереди,imgb все за imgc и imga за все остальное. The z-index свойство присваивает, какой элемент идет перед другим. Стихия с наибольшим z-index идет сверху, за ним второй по величине и так далее.

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

HTML-код

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

в CSS

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

поскольку вы теперь понимаете, что лежит где, вы знаете, что layer3 находится сверху (слой аксессуаров), layer2 находится посередине (ваш человек). и layer1 находится внизу (на заднем плане). Тогда вы можете создать аксессуары, как так:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

и затем, используя javascript, вы можете установить src первого слоя равным щелкнутому аксессуару.

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

вы можете создать столько аксессуаров, сколько вы хотите. Скажем, вы хотите добавить больше аксессуаров поверх своего лица, тогда вы можете легко создавать больше слоев ,назначать их z-индексы (и даже делать это динамически, используя javascript, как интересно!)

в заключение, я надеюсь, что вы нашли этот небольшой учебник полезным. Для ваших целей я предлагаю взглянуть на jQuery, а также на элемент. Они будут интересны в использовании и, безусловно, помогут вашему приложению.

удачи приложение.


вам нужно будет использовать комбинацию позиции: абсолют с верхней и левой позициями, а также Z-индексы для управления, какие элементы отображаются сверху.


если вы ищете решение, которое требует меньше кода, попробуйте следующее:

  1. Создайте свое искусство в photoshop, с каждым аксессуаром на другом слое
  2. сохранить каждый слой как отдельный образ. Убедитесь, что все изображения имеют полный размер холста, и используйте прозрачность. Сохранить как PNG-24. Таким образом, положение каждого аксессуара будет "жестко закодировано" на изображениях, поэтому вам не придется обрабатывать его в коде.
  3. создать контейнер <div>, и дать ему position: relative;.
  4. Поместите все изображения внутри этого <div>, as <img> теги в правильном порядке (стек слоев, фоновый рисунок первый)
  5. применить position: absolute; на каждые <img>.

это должно вам начать работу. Затем используйте jQuery для переключения каждого изображения при нажатии кнопок, представляющих их.


Я бы посмотрел на использование <canvas> - тег и API.

Это позволяет вам абсолютно позиционировать элементы и изображения легко, также, если вы используете новый браузер, вы получите преимущество аппаратного ускорения, которое ускорит все это.

для обратной совместимости в IE вам нужно будет использовать Google Проводник Холст плагин javascript.


используя анимацию jQuery, вы можете создавать "перетаскиваемые" изображения. Дайте вашим изображениям onmousedown событие, которое запускает функцию, которая перемещает изображение X горизонтальных и y вертикальных пикселей на основе текущего местоположения мыши. Проверить эту ссылку, чтобы посмотреть как найти местоположение мыши с помощью jQuery. http://docs.jquery.com/Tutorials:Mouse_Position

или, что еще лучше, получить jQuery UI "droppable" плагин, который позволяет легко дать перетащить функциональность для любого элемент. http://jqueryui.com/demos/droppable/


CSS3 поддерживает несколько фоновых слоев

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

используя комбинацию свойств css, вы можете достичь того, что вам нужно.

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

чтобы установить порядок, в котором они отображаются, вы можете использовать свойство z-index для их "стека".

Проверьте:

http://www.html.net/tutorials/css/lesson15.php

для некоторых подробных информация об этом.