Блок С Меняющимися Элементами

Тема в разделе "Модули и дополнения", создана пользователем admin, 7 июн 2016.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.673
    Репутация:
    170
    В этом уроке я расскажу о том, как можно сделать превью разных цветов одного элемента. Это свойство можно использовать, например, при создании интернет-магазина, чтобы показать цветовые вариации одного товара.
    Шаг 1.

    Прежде всего подключим нужные скрипты (фреймворк jQuery, скрипт strip.js), а также файл css-стилей. Для этого между тегами <head> пропишем следующий код:

    Код:
    <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="strip.js"></script>
            <link type="text/css" rel="stylesheet" href="strip.css" >
    Шаг 2.

    Далее пропишем такой скрипт:

    Код:
    <script type="text/javascript">
              var mystrip;
              $(document).ready(function() {
    mystrip = new ImageStrip('#stripdiv',100,0);
    });
    </script>
    Шаг 3.

    Подготовим изображение высотой 100px и по 100px в ширину для каждого элемента. В данном случае у нас 4 цветовых элемента, поэтому размер изображения равен 400px х 100px.

    При желании Вы можете сделать еще больше цветовых вариантов.

    Шаг 4.

    В нужном месте вставляем блок с меняющимися элементами таким образом:

    Код:
    <div class="strip" id="stripdiv"><img src="shirts.png"></div>
      <select onchange="mystrip.move(this.value)">
    <option value="1">Green</option>
    <option value="2">Yellow</option>
    <option value="3">Blue</option>
    <option value="4">Red</option>
    </select>
    </div>
    Если элементов больше четырех, то выпадающий список следует продолжить, соответственно меняя значения option value.

    Все готово! Надеюсь, этот урок Вам пригодится!
     

    Вложения:

    • example.zip
      Размер файла:
      20 КБ
      Просмотров:
      3
    Последнее редактирование: 7 июн 2016
    kogram нравится это.
  2. Offline

    kogram Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Спасибо