Создать ответ 
Немного измененный скрипт текста, переливающегося разными цветами
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Немного измененный скрипт текста, переливающегося разными цветами
Уже несколько раз к нам поступали комментарии к теме Текст, переливающийся разными цветами о том, что не очень удобно использовать данный код ввиду того, что он исполнен одним блоком.
Поступали предложения разбить код для того, чтобы вынести весь JavaScript код в отдельный файл для удобства и возможности кэширования.

Решил немного помочь в решении данных проблем.

Теперь, в том месте, где будет располагаться переливающийся текст, необходимо добавить следующее:
Код:
<span id="text">Текст, переливающийся разными цветами</span>

А JavaScript код, делающий всю работу, можно разместить в отдельном файле:
Код:
<script type="text/javascript">
var base_color="#D50000"
var color1="magenta"
var color2="green"
var flashspeed=99
var flashingletters=2
var flashingletters2=2
var flashpause=0
var n=0
var color_text=""
message=document.getElementById("text").innerHTML;
if (document.all||document.getElementById){
    color_text='<div align="center"><font color="'+base_color+'" size="6">';
    for (m=0; m<message.length; m++) color_text+='<span id="neonlight'+m+'">'+message.charAt(m)+'</span>'
    color_text+='</font></div>'
    document.getElementById("text").innerHTML = color_text
}
else document.getElementById("text").innerHTML = message


function crossref(number){
    var crossobj=document.all? eval("document.all.neonlight"+number) :
    document.getElementById("neonlight"+number)
    return crossobj
}

function neon(){
    if (n==0){
     for (m=0;m<message.length;m++)
     crossref(m).style.color=base_color
     }
    crossref(n).style.color=color1
    if (n>flashingletters-1) { crossref(n-flashingletters).style.color=color2 }
    if (n>(flashingletters+flashingletters2)-1) {
    crossref(n-flashingletters-flashingletters2).style.color=base_color }
    if (n<message.length-1) { n++ }
    else {
     n=0
     clearInterval(flashing)
     setTimeout("start_color()",flashpause)
     return
     }
}
function start_color(){
    if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed)
}
start_color()
</script>
06.04.2013 20:45:54
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #2
RE: Немного измененный скрипт текста, переливающегося разными цветами
А как скрипт подключить?
06.04.2013 22:58:20
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #3
RE: Немного измененный скрипт текста, переливающегося разными цветами
(06.04.2013 22:58:20)Sergey1917 писал(а):  А как скрипт подключить?

Очень просто.
Там где будет располагаться текст, переливающийся разными цветами, разместите следующее: <span id="text">Текст, переливающийся разными цветами</span>, а где-нибудь в конце странички остальной код, приведенный в первом сообщении.

При этом стоит учитывать, что Ваш движок сайта может не учитывать теги (экранировать их) в том случае, если Вы добавляете <span id="text">Текст . . . через какое-либо поле в настройках движка. В таком случае придется лезть в шаблон и добавлять <span id="text">Текст . . . непосредственно там.
07.04.2013 11:20:02
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #4
RE: Немного измененный скрипт текста, переливающегося разными цветами
Я не это имел ввиду. Вы писали: "А JavaScript код, делающий всю работу, можно разместить в отдельном файле"
Как правильно этот файл подключить? Обычно вы везде это указывали. Сам еще плохо в этом разбираюсь, делаю как пишите.

P.S. Движок теги span не заблокировал. Все заработало. Скорость уменьшил, чтобы по глазам не било. Осталось только вынести код скрипта в отдельный файл. Спасибо!
(Последний раз сообщение было отредактировано 07.04.2013 в 15:30:35, отредактировал пользователь Sergey1917.)
07.04.2013 15:01:39
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #5
RE: Немного измененный скрипт текста, переливающегося разными цветами
Значит не так понял. Wink

Вынести JavaScript в отдельный файл довольно легко. Для этого, для начала скопируйте весь JavaScript код в отдельный файл с расширением .js (например, mail_js.js). Обращаем Ваше внимание на то, что внутри .js файла не нужно указывать теги <script type="text/javascript"> и </script>. Просто удалите их.

Далее, где-нибудь в конце странички добавьте код:
Код:
<script type="text/javascript" src="mail_js.js"></script>
где mail_js.js - файл в котором будет находиться наш JavaScript код.

P.S. На вопросы в комментариях буду отвечать по мере возможности, т.к. не хватает времени.
07.04.2013 19:13:37
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #6
RE: Немного измененный скрипт текста, переливающегося разными цветами
Спасибо! Особенно за то, что пояснили - не надо переносить теги <script type="text/javascript"> и </script>. Не знал этого. Возможно, ранее, где-то уже с ними переносил. Надо перепроверять.
07.04.2013 20:37:55
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #7
RE: Немного измененный скрипт текста, переливающегося разными цветами
Здравствуйте, уважаемый администратор. Столкнулся тоже с проблемой, как привязать скрипт не по id (getElementById) для одного элемента, а для нескольких на одной странице :
У меня, например, на странице имеется строчка:
Код:
echo '<h2><span id="c_text">'.$comments['title'].'</span></h2>';

и таких заголовков - 7, скрипт работает соответственно для первого заголовка.

Сам скрипт :
Код:
var base_color="#777"
var color1="#d19191"
var color2="#6eb9cc"
var flashspeed=100
var flashingletters=2
var flashingletters2=2
var flashpause=0
var n=0
var color_c_text=""

message=document.getElementById("c_text").innerHTML;

if (document.all||document.getElementById){
    /*color_c_text='<div align="center"><font color="'+base_color+'" size="10">';*/
    for (m=0; m<message.length; m++) color_c_text+='<span id="neonlight'+m+'">'+message.charAt(m)+'</span>'
    /*color_c_text+='</font></div>'*/
    document.getElementById("c_text").innerHTML = color_c_text
}
else document.getElementById("c_text").innerHTML = message

function crossref(number){
    var crossobj=document.all? eval("document.all.neonlight"+number) :
    document.getElementById("neonlight"+number)
    return crossobj
}

function neon(){
    if (n==0){
     for (m=0;m<message.length;m++)
     crossref(m).style.color=base_color
     }
    crossref(n).style.color=color1
    if (n>flashingletters-1) { crossref(n-flashingletters).style.color=color2 }
    if (n>(flashingletters+flashingletters2)-1) {
    crossref(n-flashingletters-flashingletters2).style.color=base_color }
    if (n<message.length-1) { n++ }
    else {
     n=0
     clearInterval(flashing)
     setTimeout("start_color()",flashpause)
     return
     }
}
function start_color(){
    if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed)
}
start_color()

Пробовал работать с getElementsByClassName и getElementsByName, но не сработало, также не заработал querySelectorAll, скрипт хороший, но хотелось бы добавить функциональности.
Будьте добры, будет у вас время, гляньте что можно сделать, чтобы данный скрипт, работал для всех заголовков на странице, конечно данный скрипт придётся изменять, но без вашей помощи не получается реализовать данный момент. Думаю данный скрипт будет интересен для многих пользователей.

С уважением и заранее благодарен.
21.08.2018 16:04:24
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #8
RE: Немного измененный скрипт текста, переливающегося разными цветами
Здравствуйте, на скорую руку сделал небольшой скрипт по поиску элементов по имени класса getElementsByClassName, но не то что нужно...

Сам скрипт:
Код:
<h1 class="title-neon">Заголовок 1</h1>
<h2 class="title-neon">Заголовок 2</h2>
<h3 class="title-neon">Заголовок 3</h3>
<h4 class="title-neon">Заголовок 4</h4>
<h5 class="title-neon">Заголовок 5</h5>


<script type="text/javascript">
(function(){
    var
        color = '#c00',
        delay = 500,
        titles = document.getElementsByClassName('title-neon'),
        cnt = titles.length,
        cur_elem = 0;
    
    function neon() {
        titles[cur_elem].style.color = color;
        ++cur_elem;
        if (cur_elem < cnt) setTimeout(neon, delay);
    }
    neon();
})();
</script>

Эффект, хотелось бы получить, как в вашем скрипте по id, но ерунда какая-то получается, в данном примере при попадании на страницу просто окрашивается тест и всё и происходит это не синхронно, а с задержкой по времени.

Нужно, как в примере с id, чтобы всё работало, но для всех заголовков на одной странице, понятно что идёт выборка для одного элемента, а вот как прикрутить скрипт чтобы данный эффект от скрипта работал для всех заголовков пока не разобрался.

Будет время, гляньте, что можно сделать, буду благодарен. Yes
22.08.2018 20:21:07
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #9
RE: Немного измененный скрипт текста, переливающегося разными цветами
Здравствуйте, уважаемый администратор.
Будет время гляньте пожалуйста сообщение #7, в сообщение #8 я пытался, что-то реализовать, да и сейчас сделал несколько небольших скриптов, но ваш скрипт мне больше подходит, но только для одного элемента на странице с одним id, а мне нужен тот же эффект только для 7 элементов (в моём случае заголовков).

Если не затратно, гляньте пожалуйста, буду очень признателен.
05.09.2018 15:43:12
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #10
RE: Немного измененный скрипт текста, переливающегося разными цветами
Здравствуйте, с наступающими вас праздниками. Так и не получилось у меня самостоятельно реализовать проблему описанную в сообщении 7 http://usefulscript.ru/forum/showthread....95#pid5695, на странице 10 заголовков, а работает только для 1, что логично, так как работает по id для одного элемента на странице.
Если у вас будет время и не затратно, гляньте пожалуйста, что можно сделать, чтобы скрипт работал и для других заголовков на одной странице. Пробовал другие скрипты, но ваш скрипт понравился больше, только вот довести до ума не получается. Выходит как-то коряво.
Думаю данный скрипт будет интересен для многих пользователей.

С уважением и заранее благодарен. Yes
23.11.2018 12:33:20
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru