Плавная смена цвета слова

@Shok Wave · Регистрация: 21.01.2013

Студворк — интернет-сервис помощи студентам

Вот, к примеру, слово написано красным цветом, а когда наводишь на него мышкой, оно медленно и плавно становится , к примеру, синим.. Как сделать?))

@kalabuni · 06.06.2013, 10:49

всякое "медленно и плавно" - это через таймер
на каждом шаге таймера меняется style.color тега, в который заключено слово, на новое значение

только вот ваши условия неконкретны

во-первых:
каждый охотник желает знать где сидит фазан каждый охотник желает знать...

вам от красного к синему надо через "фазана", или через "охотник желает знать где"?

во-вторых: вы не написали с каким шагом менять цвет?
все возможные оттенки от #ff000 до #0000ff надо перебрать или же можно побыстрее, например, через 10 единиц, или через 20?

в-третьих: вы не осветили вопрос - а что должно происходить, когда мышку в процессе изменения цвета отведут?
слово должно мгновенно стать красным?
или же в том же темпе, через уже пройденные цвета вернуться к красному цвету?

в-четвёртых: если в предыдущем варианте нужен "медленный возврат", а мышку снова наведут, то как?

@Shok Wave · 06.06.2013, 15:55 **[ТС]**

Сообщение от kalabuni

всякое "медленно и плавно" - это через таймер
на каждом шаге таймера меняется style.color тега, в который заключено слово, на новое значение

только вот ваши условия неконкретны

во-первых:
каждый охотник желает знать где сидит фазан каждый охотник желает знать...

вам от красного к синему надо через "фазана", или через "охотник желает знать где"?

во-вторых: вы не написали с каким шагом менять цвет?
все возможные оттенки от #ff000 до #0000ff надо перебрать или же можно побыстрее, например, через 10 единиц, или через 20?

в-третьих: вы не осветили вопрос - а что должно происходить, когда мышку в процессе изменения цвета отведут?
слово должно мгновенно стать красным?
или же в том же темпе, через уже пройденные цвета вернуться к красному цвету?

в-четвёртых: если в предыдущем варианте нужен "медленный возврат", а мышку снова наведут, то как?

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

@Good-bad man · 06.06.2013, 16:37

http://jsfiddle.net/Yqt4p/
Правда, здесь и при наведении и при отведении курсора плавно изменяется.

Код

HTML5
1
<span style='color: #f00;' id='red'>Каждый</span> <span style='color: #f80;' id='orange'>охотник</span> <span style='color: #ff0;' id='yellow'>желает</span> <span style='color: #0f0;' id='green'>знать,</span> <span style='color: #88f;' id='cyan'>где</span> <span style='color: #00f;' id='blue'>сидит</span> <span style='color: #808;' id='violet'>фазан.</span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
function getColorsArray(col) {
    if(typeof col != 'string') return null
    if(col.length == 7 || col.length == 4) col = col.substr(1);
    if(col.length == 3)
        col = col[0]+col[0]+col[1]+col[1]+col[2]+col[2];
    if(col.length != 6) return null;
    return [
        parseInt(col.substr(0, 2), 16),
        parseInt(col.substr(2, 2), 16),
        parseInt(col.substr(4, 2), 16)
    ];
}
function getHexColor(col) {
    var r = col[0].toString(16);
    if(r.length == 1)
        r = '0' + r;
    var g = col[1].toString(16);
    if(g.length == 1)
        g = '0' + g;
    var b = col[2].toString(16);
    if(b.length == 1)
        b = '0' + b;
    return r+g+b;
}
function setColorChanging(el, from, to, N, time) {
    if(typeof el == 'string')
        el = document.getElementById(el);
    from = getColorsArray(from);
    to = getColorsArray(to);
    if(!from || !to) return null;
    var current = from;
    
    var stepR = (to[0] - from[0]) / N;
    var stepG = (to[1] - from[1]) / N;
    var stepB = (to[2] - from[2]) / N;
    
    var count = 0;
    var i;
    el.onmouseover = function() {
        i = setInterval(function() {
            el.style.color = '#'+getHexColor(current);
            current[0] += stepR;
            current[1] += stepG;
            current[2] += stepB;
            
            current[0] = Math.round(current[0]);
            current[1] = Math.round(current[1]);
            current[2] = Math.round(current[2]);
            
            if(count++ == N) {
                clearInterval(i);
                i = 0;
            }
        }, Math.round(time / N));
    }
    el.onmouseout = function() {
        if(i) clearInterval(i);
        i = setInterval(function() {
            el.style.color = '#'+getHexColor(current);
            current[0] -= stepR;
            current[1] -= stepG;
            current[2] -= stepB;
            
            current[0] = Math.round(current[0]);
            current[1] = Math.round(current[1]);
            current[2] = Math.round(current[2]);
            
            if(count-- == 0) {
                clearInterval(i);
                i = 0;
            }
        }, Math.round(time / N));
    }
}
setColorChanging('red', 'f00', 'f80', 20, 500);
setColorChanging('orange', 'f80', 'ff0', 20, 500);
setColorChanging('yellow', 'ff0', '0f0', 20, 500);
setColorChanging('green', '0f0', '88f', 20, 500);
setColorChanging('cyan', '88f', '00f', 20, 500);
setColorChanging('blue', '00f', '808', 20, 500);
setColorChanging('violet', '808', 'f00', 20, 500);

@Shok Wave · 07.06.2013, 06:02 **[ТС]**

Пытаюсь проделать все в Notepad'e (блокноте) - ничего не получается. Цвет не меняется при наводке

@Good-bad man · 07.06.2013, 06:31

Покажите ваш код.

@Shok Wave · 07.06.2013, 08:22 **[ТС]**

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<title>Hello)</title>
<head>
<script>
function getColorsArray(col) {
    if(typeof col != 'string') return null
    if(col.length == 7 || col.length == 4) col = col.substr(1);
    if(col.length == 3)
        col = col[0]+col[0]+col[1]+col[1]+col[2]+col[2];
    if(col.length != 6) return null;
    return [
        parseInt(col.substr(0, 2), 16),
        parseInt(col.substr(2, 2), 16),
        parseInt(col.substr(4, 2), 16)
    ];
}
function getHexColor(col) {
    var r = col[0].toString(16);
    if(r.length == 1)
        r = '0' + r;
    var g = col[1].toString(16);
    if(g.length == 1)
        g = '0' + g;
    var b = col[2].toString(16);
    if(b.length == 1)
        b = '0' + b;
    return r+g+b;
}
function setColorChanging(el, from, to, N, time) {
    if(typeof el == 'string')
        el = document.getElementById(el);
    from = getColorsArray(from);
    to = getColorsArray(to);
    if(!from || !to) return null;
    var current = from;
    
    var stepR = (to[0] - from[0]) / N;
    var stepG = (to[1] - from[1]) / N;
    var stepB = (to[2] - from[2]) / N;
    
    var count = 0;
    var i;
    el.onmouseover = function() {
        i = setInterval(function() {
            el.style.color = '#'+getHexColor(current);
            current[0] += stepR;
            current[1] += stepG;
            current[2] += stepB;
            
            current[0] = Math.round(current[0]);
            current[1] = Math.round(current[1]);
            current[2] = Math.round(current[2]);
            
            if(count++ == N) {
                clearInterval(i);
                i = 0;
            }
        }, Math.round(time / N));
    }
    el.onmouseout = function() {
        if(i) clearInterval(i);
        i = setInterval(function() {
            el.style.color = '#'+getHexColor(current);
            current[0] -= stepR;
            current[1] -= stepG;
            current[2] -= stepB;
            
            current[0] = Math.round(current[0]);
            current[1] = Math.round(current[1]);
            current[2] = Math.round(current[2]);
            
            if(count-- == 0) {
                clearInterval(i);
                i = 0;
            }
        }, Math.round(time / N));
    }
}
setColorChanging('red', 'f00', 'f80', 20, 500);
setColorChanging('orange', 'f80', 'ff0', 20, 500);
setColorChanging('yellow', 'ff0', '0f0', 20, 500);
setColorChanging('green', '0f0', '88f', 20, 500);
setColorChanging('cyan', '88f', '00f', 20, 500);
setColorChanging('blue', '00f', '808', 20, 500);
setColorChanging('violet', '808', 'f00', 20, 500);
</script>
</head>
<body>
<span style='color: #f00;' id='red'>Каждый</span> <span style='color: #f80;' id='orange'>охотник</span> <span style='color: #ff0;' id='yellow'>желает</span> <span style='color: #0f0;' id='green'>знать,</span> <span style='color: #88f;' id='cyan'>где</span> <span style='color: #00f;' id='blue'>сидит</span> <span style='color: #808;' id='violet'>фазан.</span>
</body>
</html>

@Good-bad man · 07.06.2013, 10:30

Не работает, потому что script из head загружается раньше (т.к. находится выше), чем body, и когда скрипт выполняется, элементов, у которых нужно менять цвет, ещё нет. Нужно дождаться, когда страница загрузится.

Оберните весь код в теге script:

JavaScript
1
2
3
window.onload = function() {
  // код поместить сюда
}

Или поместите тег script перед </body>:

HTML5
1
2
3
4
5
  ...
  <script>
  // код
  </script>
</body>

@OT_VINTA · 07.06.2013, 10:38

Зачем такие сложности?
Достаточно только css

CSS
1
2
3
4
5
6
#fff {color:#ff0000;
-moz-transition: color 1s;
-o-transition: color 1s;
-webkit-transition: color 1s;
}
#fff:hover {color:#0000ff}

HTML5
1
<a id="fff" href="#"><b>Я стану синей!</b></a>

@Shok Wave · 07.06.2013, 13:19 **[ТС]**

Сообщение от OT_VINTA

Зачем такие сложности?
Достаточно только css

CSS
1
2
3
4
5
6
#fff {color:#ff0000;
-moz-transition: color 1s;
-o-transition: color 1s;
-webkit-transition: color 1s;
}
#fff:hover {color:#0000ff}

HTML5
1
<a id="fff" href="#"><b>Я стану синей!</b></a>

Данный вариант мне больше подходит. Спасибо))

@kalabuni · 07.06.2013, 13:26

только учтите, что в Эксплорере это работает только с 10-й версии

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@Shok Wave 5 / 5 / 1 Регистрация: 21.01.2013 Сообщений: 49

	Плавная смена цвета слова 06.06.2013, 09:27. Показов 2750. Ответов 10 Метки нет (Все метки) Вот, к примеру, слово написано красным цветом, а когда наводишь на него мышкой, оно медленно и плавно становится , к примеру, синим.. Как сделать?)) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	06.06.2013, 10:49
	всякое "медленно и плавно" - это через таймер на каждом шаге таймера меняется style.color тега, в который заключено слово, на новое значение только вот ваши условия неконкретны во-первых: каждый охотник желает знать где сидит фазан каждый охотник желает знать... вам от красного к синему надо через "фазана", или через "охотник желает знать где"? во-вторых: вы не написали с каким шагом менять цвет? все возможные оттенки от #ff000 до #0000ff надо перебрать или же можно побыстрее, например, через 10 единиц, или через 20? в-третьих: вы не осветили вопрос - а что должно происходить, когда мышку в процессе изменения цвета отведут? слово должно мгновенно стать красным? или же в том же темпе, через уже пройденные цвета вернуться к красному цвету? в-четвёртых: если в предыдущем варианте нужен "медленный возврат", а мышку снова наведут, то как? 0

@Shok Wave 5 / 5 / 1 Регистрация: 21.01.2013 Сообщений: 49
	07.06.2013, 06:02 [ТС]
	Пытаюсь проделать все в Notepad'e (блокноте) - ничего не получается. Цвет не меняется при наводке 0

@Good-bad man 256 / 234 / 38 Регистрация: 31.10.2010 Сообщений: 504
	07.06.2013, 06:31
	Покажите ваш код. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.06.2013, 13:26
	только учтите, что в Эксплорере это работает только с 10-й версии 0