Переливающийся фон ячеек таблицы
Предлагаем вашему вниманию очень красивый визуальный эффект цветных переливающихся ячеек таблицы. Пример работы скрипта, который позволяет создать эффект переливающегося фона ячеек расположен чуть ниже:
| Переливающиеся ячейки | ||
| Левый столбец | Центральная | Правый столбец |
| Продолжение таблицы | ||
Для получения таких же эффектных переливающихся цветных ячеек таблицы необходимо вставить JavaScript код, приведенный ниже, в начало Вашей странички:
<script type="text/javascript">
var chidc = new Array();
var hexc =
new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var chidn = new Array(100, 70, 40);
var step = 10;
var chway = new Array(step, step, step);
var tone = new Array(1, 1, 1);
function iridescent() {
for (i=0; i<3; i++) {
chidn[i] += chway[i];
if (chidn[i]>=255) {
chidn[i] = 255;
chway[i] = -step;
}
else if (chidn[i]<=40) {
chidn[i] = 40;
chway[i] = step;
tone[i]>=3? tone[i] = 1:tone[i]++;
}
col1 = hexc[Math.floor(chidn[i]/16)];
col2 = hexc[chidn[i]%16];
tored = '';
toblue = '';
for (j=1; j<tone[i]; j++) tored += '00';
for (j=3; j>tone[i]; j--) toblue += '00';
chidc[i] = '#' + tored + col1 + col2 + toblue;
document.getElementById("cell" + i).style.backgroundColor = chidc[i];
}
setTimeout('iridescent()', 100);
}
</script>Далее в нужном месте Вашей странички, где Вы хотите разместить таблицу с подобным переливающимся фоном ячеек, добавите следующий код:
<table style="margin:0 auto; width: 450px; background-color: #888888;">
<tr style="text-align: center;">
<td colspan="3"><b>Переливающиеся ячейки</b></td>
</tr>
<tr style="text-align: center; color: #FFFFFF;">
<td style="width: 150px;" id="cell0">Левый столбец</td>
<td style="width: 150px;" id="cell1">Центральная</td>
<td style="width: 150px;" id="cell2">Правый столбец</td>
</tr>
<tr style="text-align: center; color: #FFFFFF;">
<td colspan="3">Продолжение таблицы</td>
</tr>
</table>После этого остается только запустить нашу функцию переливающихся ячеек. Делается это следующим образом:
<script type="text/javascript">
iridescent();
</script>В результате добавления данного скрипта на свой сайт Вы получите точно такую же цветную таблицу с переливающимися ячейками что, и в приведенном выше примере.
Согласитесь, что подобный эффект плавной смены фона ячеек таблицы выглядит довольно эффектно и необычно. Не на многих сайтах можно увидеть что-то подобное.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
В HTML все понятно, как сделать, но нужно что изменить в скрипте. Пробовал добавлять по аналогии со второй и третьей, но ничего не вышло.
Заранее благодарен за ответ.
var chidn = new Array(120, 100, 80, 60, 40);
var step = 10;
var chway = new Array(step, step, step, step, step);
var tone = new Array(1, 1, 1, 1, 1);
У меня на самом деле 3 ячейки, изменил все переменные, в одной переменной
var chidn = new Array(120, 100, 80, 60, 40, 40);
для 6 ячейки значение тоже будет 40, как и для 5 ячейки?. Пробовал 20, меняет цвет на красный.
И еще один вопрос, все работает, но есть ли возможность сделать цвета не такие контрастные, яркие и поменять цвет в строках:
tored = '';
toblue = '';
поменять на какой-то свой, например #d19191 (допускается запись в 16 формате?).
Следовательно, для ячеек в переменных не должно быть значений больше максимального и меньше минимального. Для плавности смены цвета шаг в массиве должен быть постоянным, например, var chidn = new Array(190, 160, 130, 100, 70, 40);
На счет своих цветов думаю не выйдет.