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

@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 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

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

	Плавная смена цвета слова 06.06.2013, 09:27. Показов 2742. Ответов 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