Скрипт: при наведении меняем цвет на один из заданных
Нужен скрипт, чтобы при наведении на div его цвет менялся на любой из заданных (будет 6-8 значений) в скрипте. Примерно так, как на сайте студии Лебедева.
В гугле не забанен, но пока не могу найти ничего подходящего... |
Цитата:
|
Цитата:
|
Цитата:
|
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
document.getElementById("id").onmouseover = function() {
var color = ['red','green','blue', 'orange', 'yellow', 'violet']
this.style.backgroundColor = color[Math.round(Math.random()*color.length)];
};
</script>
</body>
|
j0hnik,
а если при каждом наведении, новый цвет из заданных? :) |
Цитата:
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan']
var rand = Math.round(Math.random()*(color.length-1));
if (rand2 === rand) {this.style.backgroundColor = color[++rand];}
else {this.style.backgroundColor = color[rand];}
rand2 = rand;
};
</script>
</body>
|
а можно и условие в условии пока не будет отличаться! но это первое что в голову пришло!
|
j0hnik,
строки 10 и 11 не айс!!! |
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan'];
var rand;
do {
rand = Math.floor(Math.random() * color.length);
this.style.backgroundColor = color[rand];
} while (rand == rand2);
rand2 = rand;
};
</script>
</body>
Ну теперь то идеально? ;) |
| Часовой пояс GMT +3, время: 11:43. |