Блог

Вот чего я хотел бы достичь.

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

У меня ограниченные знания Java Script и HTML5 (отсюда и мой вопрос здесь), но я программист, поэтому я не боюсь кода. Я не прошу полностью разработанного решения (если таковое существует), поскольку я с удовольствием закодирую его сам, но было бы здорово, если бы вы могли дать мне несколько советов, указаний, идей, как заставить это работать.

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

Я хотел бы что-то сделать, используя JS, если это возможно, и не используя какую-либо внешнюю библиотеку. Будет ли использование 2D canvas решением как для рисования изображения, так и пользовательского интерфейса (слайдера)?

Спасибо.

Следующее используется для создания ползунка из 10 фиксированных точек в HTML5.

 <input id="barslidesize" type="range"  min="1" max="10">
  

Теперь вы можете получить значение ползунка с помощью следующего кода:

 var currentPos = document.getElementById("barslidesize").value;
  

Затем вы можете соответствующим образом переключить эту переменную:
Нравится,

  switch (currentPos)
 {
  case "1":
    //do this
    break;
  case "2":
    //do that;
    break;

     .....

  case "10":
    //do neccessary;
    break;
 }
  

Надеюсь, это поможет вам начать! Это очень простой код.

На самом деле вам нужно очень мало Javascript. Вы могли бы сделать это с помощью canvas, но я не думаю, что это лучшее решение.

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

CSS :

 <style type="text/css">
    .greyslidercontainer {
        padding: 0px;
        background: url(black.png) no-repeat;
    }

    .greyslidercontainer img {
        display: block;
        opacity: 1;
    }
</style>
  

HTML :

 <div class="greyslidercontainer">
    <img src="white.png" />
    <input
        type="range"
        min="0.0"
        max="1.0"
        step="0.01"
        value="1"
        onchange="this.previousElementSibling.style.opacity = this.value"
    />
</div>