Случается, что на web-ресурсе пользователю необходимо изменить значение какого-то параметра, другими словами что-то отрегулировать под себя. Это может быть звук, может быть яркость, может быть размер… Одним словом, это может быть все что можно описать с помощью цифр.
И тут нам на помощь приходит такой элемент интерфейса как RANGE, а по русски ПОЛЗУНОК.
Вызывать мы его будем в HTML, модный внешний вид мы предадим ему в CSS, ну а что он должен регулировать, мы объясним ему в JavaScript. Поехали!!!
Создаем HTML и вставляем в него код:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "111.js"></script>
<input type="range" min="1" max="40" id="size" oninput="x()" value="20">
<img src="панда.jpg" id="pic">
</body>
</html>Единственная незнакомая часть кода в этом HTML это:
<input type="range" min="1" max="40" id="size" oninput="x()" value="20">input предлагает пользователю ввести значение
type= «range» говорит о том, что сделать это надо с помощью ползунка
min=»1″ max=»40″ показывают минимальное и максимальное регулируемое бегунком значение.
id=»size» нужен чтобы сделать бегунок уникальным, на случай если у нас будут еще бегунки.
oninput=»x()» при изменении положения бегунка будет вызываться функция x(), а что будет делать эта функция мы напишем в JavaScript.
value= «20» определяет, где будет находиться бегунок сразу после загрузки страницы
Про внешний вид ползунка в CSS можно написать очень большую статью, но я этого делать не стану, напишу лишь, что стиль для ползунка и для полоски, по которой он перемещается оформляется как для двух разных элементов. Вот пример:
input#size[type=range] {
width: 100%;
height:20px;
}
input#size[type="range"]::-webkit-slider-thumb {
width: 10px;
height: 26px;
}Теперь напишем программу на JavaScript, которая при изменении положении ползунка будет вызывать функцию, которая, в свою очередь, будет уменьшать и увеличивать размер картинки на сайте.
function x() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;
}Теперь, при перемещении ползунка, все картинки с ID ‘pic’ будут менять размер.
Вот и все на сегодня!!!