Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 11
1

Кнопка, плавно меняющая цвет при наведении

05.11.2015, 15:14. Показов 2074. Ответов 1
Метки нет (Все метки)

не могу разобраться как добавить цвета. их должно быть 16, а у меня получился только 1
PHP/HTML
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
<html>
<head>
<title>Заголовок</title>
</head>
<body>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
Color = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 
function mOver() {
for (i = 0; i < 16; i++) {
setTimeout('document.myForm.button.style.background = "#'+Color[16-i]+'f'+Color[16-i]+'fff";', i * 100);
   }
}
 
function mOut() {
for (i = 0; i < 16; i++) {
setTimeout('document.myForm.button.style.background = "#'+Color[i]+'f'+Color[i]+'fff";', i * 100);
   }
}
 
</SCRIPT>               
 
 
<form name=myForm>
<input type=button name=button style="background: #ffffff" value="  Наведи!  " onMouseOver='mOver()' onMouseOut='mOut()'>
</form>
</body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.11.2015, 15:14
Ответы с готовыми решениями:

Как поменять цвет кнопки при ее нажатии, а при наведении чтоб цвет не менялся?
//css файл .mymegabutton{ background: blue; } .hvr{ background: green; } .act{...

При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно)
При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно), при отведении...

Кнопка, изменяющая фон при наведении мыши
Используя CSS и JavaScript сделать кнопку изменяющую фон при наведении мыши на светлый, и при клике...

При наведении изменять цвет текста в <font>
мне надо как-то сделать, чтобы при наведении менялся цвет текста в &lt;font&gt; Есть js функция color ...

1
30 / 30 / 29
Регистрация: 11.10.2014
Сообщений: 268
06.11.2015, 01:58 2
Лучший ответ Сообщение было отмечено darkscarlet как решение

Решение

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
<html>
<head>
<title>Заголовок</title>
</head>
<body>
 
  
<form name=myForm>
<input type=button name=button value="  Наведи!  " >
</form>
 
<SCRIPT >
;(function(){
 
 var h = 0, l = 100, a = 0, myVar; 
 
 document.myForm.button.onmouseover = function () {
 a = 0;
 var myVar =setInterval(function () {
    document.myForm.button.style.background = "hsla("+h+", 50%,"+ l +"%, 1)";
    h++ ; l -= 0.4;
    if ( h == 360 || l <= 35 || a != 0) clearInterval(myVar);
 
    console.log( h );
}, 20 );
};
 
document.myForm.button.onmouseout = function () {
 a++;
 var myVar2 =setInterval(function () {
    document.myForm.button.style.background = "hsla("+h+", 50%,"+ l +"%, 1)";
    h-- ; l += 0.4;
    if ( h == 0 || l >= 100 || a != 1 ) clearInterval(myVar2);
    console.log( h );
}, 10 );
};
 
})();
</SCRIPT>               
 
 
</body>
</html>
Добавлено через 6 минут
Ваш кстати код тоже работал ))

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
 
<html>
<head>
<title>Заголовок</title>
</head>
<body>
            
<form name=myForm>
<input type=button name=button style="background: #ffffff" value="  Наведи!  " onMouseOver='mOver()' onMouseOut='mOut()'>
</form>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
Color = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 
function mOver() {
for (i = 0; i < 16; i++) {
setTimeout('document.myForm.button.style.background = "#'+Color[16-i]+'f'+Color[16-i]+'fff";', i * 100);
   }
}
 
function mOut() {
for (i = 0; i < 16; i++) {
setTimeout('document.myForm.button.style.background = "#'+Color[i]+'f'+Color[i]+'fff";', i * 100);
   }
}
 
</SCRIPT> 
 
</body>
</html>
нтмл элементы не успевали отрисоваться до того как дж начинал работать. Это я решил просто перенеся скрипт ниже чем кнопка.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.11.2015, 01:58

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Менять цвет второго элемента при наведении на первый и наоборот
Задача: есть два блока div1 - black, div2 - gray. Если наводим на div1 , то div2 становится...

При наведении курсора на строку формы изменить цвет её фона
1)Написать script, в результате работы которого при попадании курсора мыши на элемент списка формы,...

Плавно появляющиеся кнопка
Здравствуйте! Помогите куда копать что бы сделать такой эффект меню: dragoninteractive.com ...

Как сделать, что бы цвет текста менялся при наведении курсора???
Как сделать, что бы цвет текста менялся при наведении курсора на какой-нибудь текст в облаке...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.