Изменения цвета букв

 
0
 
JavaScript
ava
guest | 04.12.2004, 06:04
Возможно ли сделать такой скрипт, который менял БЫ цвета букв одного слова!?
Kommentare (24)
ava
mix | 04.12.2004, 13:54 #
Можно если каждую букву одеть в span , это можно сделать скриптом.
ava
Aliance | 04.12.2004, 18:34 #
Уточните.
ava
Се ля ви | 04.12.2004, 18:44 #
Скрипт, написанный мною для сайта http://www.mirtour.ru/ (действие можно увидеть например в разделе клиентам)

Реализует перемигивание букв. Вместо цвета можно поставить не чёрный, а какой-нибудь другой, или вообще рандомный (только не забывайте преобразовывать в 16-ричный формат):


...
<a href="/" id="blink">Надпись с пробелами, буквы в которой будут мигать чёрным цветом</a>
...

// Функция инициализации "перемигивания" букв
function init(){

   var Str = new String(document.getElementById('blink').firstChild.nodeValue); // Выделяем текст ссылки
   document.getElementById('blink').removeChild(document.getElementById('blink').firstChild); // Удаляем текст внутри ссылки
 
   var spanNode, txtNode;
 
   for (var i = new Number(0); i < Str.length; i++) { // Пробегаем все символы текста ссылки
   
       if (Str.charAt(i) == ' ') continue; // Если наткнулись на пробел - пропускаем
 
       // Создаём элемент span и добавляем к нему внутрь текстовый нод из текущего символа
       spanNode = document.createElement('span');
       spanNode.appendChild(
           document.createTextNode(
               Str.charAt(i) +
               // Если следующий символ - пробел, его присоединяем тоже
               ( ((i + 1 < Str.length) && (Str.charAt(i+1) == ' ')) ? ' ' : '' )
           )
       );
       
       // Добавляем его внутрь ссылки
       document.getElementById('blink').appendChild(spanNode);
   }
 
   // Записываем ссылку на массив нодов ссылки и их количество в специальные переменные - объявлены они будут ниже
   blnk = document.getElementById('blink').childNodes;
   childrenLength = blnk.length;
 
   // Запускаем поток, в котором функция blinking() будет вызываться каждые 100 миллисекунд = 0.1 секунды
   window.setInterval('blinking()', 100);
}

/* Внешние переменные, в которых хранятся значения о тех нодах, которые были перекрашены.
  Одновременно перекрашиваются 3 нода, поэтому переменных - тоже 3*/
var rand1 = 0, rand2 = 0, rand3 = 0;

var blnk; // Здесь будет ссылка на массив нодов, для которых устраивается перемигивание
var childrenLength; // Здесь будет хранится количество нодов для перемигивания

// Функция, выполняющая быстрое перемигивание символов самого верхнего подпункта меню
function blinking() {

   // восстанавливаем изначальный цвет у нода, который закрасили в предыдущий раз
   blnk[rand1].style.color = '';
   // присваиваем переменной новое случайное значение, лежащее в диапазоне от 0 до childrenLength и перекрашиваем элемент, соответствующий этому индексу
   blnk[rand1 = Math.floor( Math.random() * childrenLength )].style.color = '#000000';

   blnk[rand2].style.color = '';
   blnk[rand2 = Math.floor( Math.random() * childrenLength )].style.color = '#000000';

   blnk[rand3].style.color = '';
   blnk[rand3 = Math.floor( Math.random() * childrenLength )].style.color = '#000000';
}


...
init();
...


Вместо написания документации я им закомментировал чуть ли не кааждую строчкуу, так что, думаю, разберётесь smile
ava
Sardar | 04.12.2004, 19:03 #
Цитата
for (var i = new Number(0);

Какой страшный изврат... :omg

Посмотрел код, должен работать в Мозиллем, пошёл по сылке что ты дал, в мозилле не пашет...
ava
guest | 04.12.2004, 19:03 #
Да я бы хотел, чтобы всё слово мигало одинаковыми буквами!!!

Допустим так:

слово написано белыми, через секунде превращается в красный увет, ещё через секунду в зелёный и так далее...

Реально ли?!
ava
Sardar | 04.12.2004, 19:08 #
Цитата
Реально ли?!

Ну что за вопрос ? smile
JS собстна создан изменять свойства обьектов, текст на странице это обьект, цвет это одно из его свойств.
document.getElementById("test").style.color="red";
......
<span id="test">Test</span>


Пошевели мозгами, посмотри пример от Се ля ви, у тебя всё получится. ;-)
ava
guest | 04.12.2004, 19:12 #
Я в JS полный 0.
Поэтому без полноценного кода далеко не уйду smile)
ava
Aliance | 04.12.2004, 21:37 #
Тебе нужно плавное изменение цвета (fade) или же резкое? Скажи что нужно - напишу...
ava
guest | 05.12.2004, 02:03 #
Да мне без разницы!!!
Думаю, что плавное было бы лучше!!!
И за это спасибо!!!
ava
Aliance | 05.12.2004, 14:52 #

<script language=JavaScript>
miscSub="<A HREF='news/index.php' target='mapwin' CLASS='menuClass'>Новости</A> | <A HREF='team/team.htm' target='mapwin' CLASS='menuClass'>Состав</A> | <A HREF='stats/statspl.htm' target='mapwin' CLASS='menuClass'>Статистика</A> | <A HREF='contact.htm' target='mapwin' CLASS='menuClass'>Контакты</A>"
tutorialSub="<A HREF='results/2004.html' target='mapwin' CLASS='menuClass'>Расписание</A> | <A HREF= 'results/2004.html' target='mapwin' CLASS='menuClass'>Результаты</A> | <A HREF='stats/table.htm' target='mapwin' CLASS='menuClass'>Таблица</A> | <A HREF='games.htm' target='mapwin' CLASS='menuClass'>Обзоры</A>"
menusSub="<A HREF='video/video.html' target='mapwin' CLASS='menuClass'>Видео</A> | <A HREF='photo/archive.htm' target='mapwin' CLASS='menuClass'>Архив</A> | <A HREF='gallery/' target='self' CLASS='menuClass'>Фотогалерея</A>"
</SCRIPT>

<table cellSpacing=0 cellPadding=2 width="100%" border=0>
<tbody>
<tr>
<td class=menuClass2 align=middle><FONT face="COMIC SANS MS" size=2>
<A class=menuClass2 href="index.htm">На главную</A> |
<A class=menuClass2 onmouseover=FadeIn(miscSub) href="javascript://">Команда</A> |
<A class=menuClass2 onmouseover=FadeIn(tutorialSub) href="javascript://">Чемпионат</A> |
<A class=menuClass2 onmouseover=FadeIn(menusSub) href="javascript://">Мультимедия</A> |
<A class=menuClass2 href="http://www.baltic-cafe.spb.ru/rubez/guestbook/index.php">Гостевая</A> |
<A class=menuClass2 href="http://www.baltic-cafe.spb.ru/rubez/phorum/index.php">Форум</A>
</FONT></td></tr>
<tr>
<td>
<script language=JavaScript>
fadeFace="Comic Sans MS";
fadeSize="2";
fadeWidth="100%";
fadeHeight=[1, "lines"]
fadeSpeed=35;
fadePause=250;

colors=["#666699", "#3300CC", "#3300FF", "#3333FF", "#3366FF", "#3399FF", "#33CCFF", "#33FFFF", "#FFFFFF"]
linkcolors=["#330099", "#3300CC", "#3300FF", "#3333FF", "#3366FF", "#3399FF", "#33CCFF", "#33FFFF", "#FFFFFF"]
IE=document.all;NS=document.layers;NS6=document.getElementById&&!document.all;BRs='';thehex=-1;theStr="";
if (fadeHeight[1]=="lines") for (i=0;i<fadeHeight[0];i++) {BRs+="<BR>"}
if (NS) {document.write('<ILAYER id=fadeLayer><FONT SIZE="'+fadeSize+'" FACE="'+fadeFace+'">'+((!NS)?BRs:'')+'<LAYER id=fadeLayer width='+fadeWidth+((fadeHeight[1]=="px")?" height="+fadeHeight+"":"")+' TOP=0 LEFT=0></LAYER></ILAYER>')}
else {document.write('<DIV id=baseFadeLayer style="position:relative;width:'+fadeWidth+((fadeHeight[1]=="px")?";height:"+fadeHeight+"":"")+'"><FONT SIZE="'+fadeSize+'" FACE="'+fadeFace+'">'+BRs+'<DIV id=fadeLayer STYLE="position:absolute;top:0;left:0;z-index:2;width:100%" ALIGN=CENTER></DIV></DIV>')}

function fadeText(type, which) {
if(window.fadetimeout){clearTimeout(fadetimeout);fadetimeout=''}
textStr=""
if (thehex<colors.length-1&&type=="in"||thehex>-1&&type=="out") {
if(type=="in"){thehex++;theStr=which}
else{thehex--;}
textStr="<FONT FACE=verdana SIZE=2 COLOR='"+colors[thehex]+"'>";
textStrs=theStr.split('>')

// If links in the string, adds colors to them
if (textStrs.length>1) {
for (i=0;i<textStrs.length;i++) {
textStr+=textStrs[i]+((i<textStrs.length-1)?">":"")
if (textStrs[i].charAt(textStrs[i].length-1).toLowerCase()=="a")textStr+="</FONT><FONT COLOR="+colors[thehex]+""+((NS6)?" SIZE="+fadeSize+" FACE="+fadeFace:"")+">"
if (textStrs[i].charAt(textStrs[i].indexOf('<')+1).toLowerCase()=="a")textStr+="<FONT COLOR="+linkcolors[thehex]+">"}}

else {textStr+=theStr}

if(thehex==-1){textStr=""}

if (NS6)document.getElementById('fadeLayer').innerHTML=textStr;
if (IE)fadeLayer.innerHTML=textStr;
if (NS){document.layers["fadeLayer"].document.layers["fadeLayer"].document.write("<DIV ALIGN='CENTER'>"+textStr+"</DIV>")
document.layers["fadeLayer"].document.layers["fadeLayer"].document.close()}

fadetimeout=setTimeout('fadeText("'+type+'", "'+which+'")', fadeSpeed);}}

function FadeIn(message) {
if(window.tryingfade){clearTimeout(tryingfade);tryingfade="";}
if(thehex==-1){tryingfade=setTimeout('fadeText("in", "'+message+'")',fadeSpeed*2);}
else if (thehex<colors.length-1&&message==theStr||message!=theStr&&thehex>-1||thehex&&thehex<colors.length-1){
tryingfade=setTimeout('FadeIn("'+message+'")',fadeSpeed)
if(thehex==colors.length-1){fadeText('out')}}}

function FadeOut() {
if(window.tryingfade){clearTimeout(tryingfade);tryingfade="";}
fadeText('out');}
</SCRIPT>
...


Вот скрипт меню с моего сайта, посмотри - если это тебе подходит - можно сделать так, чтобы просто слово меняло свой же цвет, плавно и не с одного на другой, а переливалась :)

Если подходит - могу переписать для этих целей ;)
ava
guest | 05.12.2004, 17:29 #
Прикольный скрипт!!!
Ну я другое имел ввиду!!
Чтобы без навода на ссылку мигало одно слова!!!
Понимаете!?
Загружалась страница и на ней одно слово меняло цвета, ну или переливались цвета в этом слове, можно так сделать!?
ava
Aliance | 05.12.2004, 17:46 #
Цитата
...можно сделать так, чтобы просто слово меняло свой же цвет, плавно и не с одного на другой, а переливалась



Если подходит - могу переписать для этих целей ;)

А вот это я для кого писал? Для Санты Клауса?
Можно, что собстывенно я и буду делать smile ..если меня никто не опередит )))
ava
sergejzr | 05.12.2004, 17:49 #
Вот пример smile http://files.vingrad.ru/sergej.z/js/migalka.html

А вот код :)


<html>
<head>
<title>Крутая мигающая надпись</title>
<script>
//Ети цвета я "украл" у Aliance постом выше :)
colors=["#666699", "#3300CC", "#3300FF", "#3333FF", "#3366FF", "#3399FF", "#33CCFF", "#33FFFF", "#FFFFFF"];
function changeColor()
{
var migalka=document.getElementById("migalka");
//Сбрасываем цвет или же заряжаем, если в первый раз
if((migalka.color_number>=colors.length)||!migalka.color_number){migalka.color_number=0;}

migalka.style.color=colors[migalka.color_number];
migalka.color_number++;

//Вот тут стоит 100. Чем больше число будет стоять,
//тем медленнее текст будет менятся
setTimeout("changeColor()",100);
}
</script>
</head>
<body onLoad="changeColor()">

<div id="migalka">Крутая мигающая надпись</div>

</body>
</html>

später ergänzt:
Сорри, Aliance. Я когда начал писать ещё не видел, что ты переделывать собираешься...
ava
Aliance | 05.12.2004, 17:51 #
Error.
12
2
Объект не поддерживет это свойство.

-------------------------------
Мой IE 6 SP2
später ergänzt:
Цитата (sergej @ 5.12.2004, 17:49)
Сорри, Aliance. Я когда начал писать ещё не видел, что ты переделывать собираешься...

Мы не на гонках, мы на форуме помощи, если это то - что требуеться человеку - какая разница кто написал :о))
ava
sergejzr | 05.12.2004, 17:59 #
Странно, что он var хотел smile
Теперь должно всё быть ОК smile Проверено ИЕ, Мозилла, Опера
http://files.vingrad.ru/sergej.z/js/migalka.html
ava
Sardar | 05.12.2004, 18:17 #
Крутой Колян первые пара ответов тебе не подошли, но всё равно нужно говорить спасибо, хотя бы просто из вежливости ;-)

Если сейчас хватит времени, то дам свой вариант, кода много но всё универсально smile
ava
guest | 05.12.2004, 23:01 #
СПАСИБО ОГРОМНОЕ!!!
ВОТ ЭТОТ СКРИПТ Я КАК РАЗ И ИМЕЛ ВВИДУ!!!
Очень понравился, сергей!!!
ava
sergejzr | 05.12.2004, 23:10 #
Крутой Колян , очень рады, что смогли Вам помочь.
Регистрируйтесь у нас на форуме. Это подарит Вам новые возможности ;)
ava
Крутой Колян | 05.12.2004, 23:46 #
А вот скажите пожалуйста, у меня идёт текст:
ля-ля-ля и затем должен идти мигающий текст в одну строчку, но когда я прописываю <div id="migalka">ляляял</div>, у меня вот это "ляляля" переносится на новую строку, это можно как-нибудь исправить!?
ava
Се ля ви | 06.12.2004, 00:22 #
Цитата
Я в JS полный 0

Тогда задавай вопрос в раздел "JavaScript для начинающих"...

Цитата (Sardar @ 4.12.2004, 19:03)
Цитата (Се ля ви @ 4.12.2004, 17:44)

for (var i = new Number(0);





Какой страшный изврат...



Посмотрел код, должен работать в Мозиллем, пошёл по сылке что ты дал, в мозилле не пашет...


Действительно - не лучший вариант, я когда писал, мне казалось что я в большей степени следую ОО-парадигме таким синтаксисом... Конечно, лучше просто
var i = 0;
написать :-)

А в Мозилле не работает из-за чего-то другого - там если где-то ошибка, то она стопорится и остальной скрипт вообще не выполняет - так что до этого скрипта мозилла не доходит - раньше где-то загибается, а скрипт там большой. Мне не платили за то, чтобы я разбирался именно с этим моментом, всё всех усраивало, а у меня была куча других дел...
später ergänzt:
Цитата
<div id="migalka">ляляял</div>, у меня вот это "ляляля" переносится на новую строку

вместо div напиши span , или в стилях пропиши строку
#migalka {display: inline;}
ava
sergejzr | 06.12.2004, 00:28 #
Цитата
А вот скажите пожалуйста, у меня идёт текст:

ля-ля-ля и затем должен идти мигающий текст в одну строчку, но когда я прописываю <div id="migalka">ляляял</div>, у меня вот это "ляляля" переносится на новую строку, это можно как-нибудь исправить!?

Нет проблем smile просто заменяем div на span.
я уже подправил smile Мигалка совершенствуется.
http://files.vingrad.ru/sergej.z/js/migalka.html

ПС:
Спасибо за регистрацию, надеюсь Вам понравится у нас smile
ava
Се ля ви | 06.12.2004, 00:42 #
Цитата (sergej @ 6.12.2004, 00:28)
Мигалка совершенствуется.

Теперь по логике нужно сделать рандомными цветами smile
ava
Крутой Колян | 06.12.2004, 17:56 #
Спасибо!
Заменил на спан!!!
Теперь ВСЁ супер smile)
ava
Alx | 17.12.2004, 19:21 #
Крутой Колян
а я тя знаю! smile я када-то на твой сайт на народе зашёл... smile
später ergänzt:
то есть не на народе, а на da.ru - вот он :)

http://coolkolyan.da.ru/index.htm

мне особенно понравился раздел "мои телки" smile :)

сорри за флейм, просто действительно ржачниый сайт smile
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
advanced
Absenden