Сегодня я кодировал еще два спецэффекта: один сделан с нативным вводом [type = range], а другой полностью настроен; Ниже приведены полный код и демонстрация:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> #tip {position: Absolute; Верх: 30px; слева: 0; Справа: 0; Ширина: 200px; Высота: 160px; Порность: Авто; Граница: 1px сплошной серый; Фоно-цвета: Cornsilk; } #tip div {позиция: относительно; Ширина: 100%; Высота: 80px; Пограничный подвод: 1px сплошной серый; } .out {позиция: относительно; Слева: 16%; дисплей: встроенный блок; Граница: 2PX Solid Royalblue; маржинальная версия: 20px; Ширина: 130px; Высота: 20px; Фоно-цвета: Lightgoldenrodyellow; } .in {display: block; Высота: 20px; высота линии: 20px; Текст-альбом: верно; Цвет: белый; Ширина: 50%; Справочный изображение: линейно-градиент (справа, Pourchblue 0%,#336699 50%, Red 0px 1px rgba (0, 0, 0, 0, 0, 0, вставка, 0px 1px rgba (0, 0, 0, 0, 0, вставка, 0px 1px rgba (0, 0, 0, 0, inset, 0px 1px (0, 0, 0, 0, 0px 1px (0, 0, 0, 0, 0Px 1px (0, 0, 0, 0, inset, 0px 1px rgba (0, 0, 0, inset. 0, 0, 0, вставка, 0px 1px rgba (0, 0, 0, 0, 0, вставка, 0px 1px rgba (0, 0, 0, 0, 0,6) вставка; фоновый цвет: LightskyBlue; граница-радиус: 15px; width: 60%; -Webkit-apperance: не; Вход [Тип = «Диапазон»: Вставка; }. Document.GetElementById ('Inner1'); inner.style.width = range.value+'%'; ID, var; inner2.shile function () {console.log ('a:'+a+','+'value:'+value); if (значение <100) {value ++; ClearTimeout (id1); id = "inner1"> 50 </span> </span> <input id = "range" type = "range" min = "0" max = "100" step = "1" value = "50"> </div> <div id = "d2"> <input id = "btn1" type = "кнопка" value = "<> <pan =" outter2 "> <pan Id =" inner2 "</span>" </span> "</span>" </span "</span>" </span> "</span>" </span> "</span>" </span> "</span>" </span> "</span>" </span> "</span>" </span "</span>". id = "btn2" type = "value ="> "> </div> Нажмите и удерживайте кнопку в течение 0,5 секунды, и она продолжит меняться!Первая реализация очень проста, поэтому я не буду объяснять это, прочитайте код сам;
Здесь мы в основном представляем реализацию второго примера:
Когда мы видим требование или спецэффекты других людей, не спешите видеть код других людей. Подумайте об этом, как вы должны это достичь? Сначала выпустите свои идеи
Принцип реализации этого специального эффекта:
1. Гнездование пролета в пределах периода времени;
• Внешний пролет: только ширина отображения, высота, граница, без фона
• SPAN внутри: высота такая же, как и внешняя, ширина по умолчанию составляет 50%. Сначала установите цвет фона на линейный градиент
2. Событие кнопки OnClick относительно простое. Нажмите на него, чтобы изменить ширину промежутка внутри и отобразить номер.
3. Когда кнопка - OnmouseDown, запустите таймер и выполните функцию изменения функции через 500 мс. Функция изменения - это функция, которая возвращает себя с помощью SetTimeout. Он перезвонит один раз без 16,7 мс для достижения эффекта анимации.
Анализ сложности:
1. Это предложение var a = parsefloat (window.getcomputedstyle (over2, null) .width)/100;
Используется для получения начального значения, если вы используете over2.style.width
Это не стоит того, конечно, вы также можете установить фиксированное значение, например, здесь можно установить как
var a = 1,3,
Обратите внимание, что метод getComputedStyle не поддерживается в IE9.
Элемент объекта IE имеет свойство CurrentStyle;
2. Это предложение
btn1.onmouseup = function () {cleartimeout (id1);
ClearTimeOut (id)};
Это очень важно. Без него Onmosedown будет запускается до того, как Onclick будет запущен. Через 500 мс он начнет выполнять, а затем будет выполнен внешний таймер;
3. больше ничего не сложно;
Этот пример фактически расширяется во многих других приложениях, таких как замена среднего дисплея на статьи, изображения и т. Д., А затем заменить кнопку на пользовательские, эффект будет крутым!
Если вы думаете, что у меня есть что -то плохое в написании, пожалуйста, укажите это!
Приведенный выше простой пример практического боя JavaScript (нативный диапазон и пользовательские специальные эффекты) - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.