X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите советом по JS
foxlite
foxlite
Topic Starter сообщение 3.4.2016, 20:15; Ответить: foxlite
Сообщение #1


Новичок
*

Группа: User
Сообщений: 29
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


Здравствуйте. Нашел ротатор текста на JavaScript, он работает вполне нормально, меняет текст по времени, но мне необходимо сделать так, что бы каждый раз текст сменялся плавно, помогите пожалуйста, кто разбирается.
Вот код:
Код
var elements = 3;     //количество div-элементов с текстом
    var time = 3;         //задержка смены текста по времени в секундах
    var currentText = 0;
    var color = 255;
    noElement = elements + 1;
    time = time*1000;
    function blockRotator () {
        currentText++;
        if (currentText == noElement) {
            currentText = 1;
        }
        if (currentText == 1) {
            prevText = elements;
        }
        else {
            prevText = currentText - 1;
        }
        var hide = document.getElementById('block'+prevText);
        hide.style.display = 'none';
        var show = document.getElementById('block'+currentText);
        show.style.display = 'block';

        setTimeout('blockRotator()', time);
    }
    window.onload = blockRotator;


Код
<div id="container">
                  <div id="block1"><h1>Привет</h1></div>        
                  <div id="block2"><h1>Как дела?</h1></div>
                  <div id="block3"><h1>Третий пункт</h1></div>
               </div>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 3.4.2016, 21:06; Ответить: x64
Сообщение #2


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3181
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2544 раза
Репутация:   279  


Цитата(foxlite @ 3.4.2016, 19:15) *
необходимо сделать так, что бы каждый раз текст сменялся плавно

Что понимается под этой фразой? Как Вы представляете плавную смену текста abc на xyz?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxlite
foxlite
Topic Starter сообщение 3.4.2016, 21:16; Ответить: foxlite
Сообщение #3


Новичок
*

Группа: User
Сообщений: 29
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


x64, я имею в виду не резко текст выскакивал, а с некоторой анимацией, я знаю что это можно сделать с помощью JS, но не знаю как именно прописать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jjoret
jjoret
сообщение 4.4.2016, 1:50; Ответить: jjoret
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 791
Регистрация: 29.11.2011
Из: Беларусь
Поблагодарили: 169 раз
Репутация:   45  


пропишите transition: 0.3s в стилях


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxlite
foxlite
Topic Starter сообщение 4.4.2016, 2:27; Ответить: foxlite
Сообщение #5


Новичок
*

Группа: User
Сообщений: 29
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


jjoret, прописывал, не помогло.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Switchback
Switchback
сообщение 8.4.2016, 0:44; Ответить: Switchback
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 58
Регистрация: 1.12.2008
Из: Харьков
Поблагодарили: 10 раз
Репутация:   2  


Я бы использовал jQuery анимацию. Для работы подключаем jQuery к странице.
Код
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>


Но код как для частного случая. Я использовал селектор #container > div, ибо других вложенных div в #container нет.
Возможно прописать селектор .block, например. А в каждый div с "block" добавить класс block.

JS
Код
$( document ).ready(function() {
    $('#container > div').hide();
});

var elements = 3;     //количество div-элементов с текстом
    var time = 3;         //задержка смены текста по времени в секундах
    var currentText = 0;
    var color = 255;
    noElement = elements + 1;
    time = time*1000;
    $
    function blockRotator () {
        currentText++;
        if (currentText == noElement) {
            currentText = 1;
        }
        if (currentText == 1) {
            prevText = elements;
        }
        else {
            prevText = currentText - 1;
        }

        $('#block'+prevText).hide();//
        $('#block'+currentText).fadeIn(500);


        setTimeout('blockRotator()', time);
    }
    window.onload = blockRotator;

Код
<div id="container">
                  <div id="block1"><h1>Привет</h1></div>        
                  <div id="block2"><h1>Как дела?</h1></div>
                  <div id="block3"><h1>Третий пункт</h1></div>
</div>


Сообщение отредактировал Switchback - 8.4.2016, 0:45


--------------------
Успеха достигает тот, кто не оставляет сил на обратный путь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MoriSar
MoriSar
сообщение 10.5.2016, 14:39; Ответить: MoriSar
Сообщение #7


Новичок
*

Группа: Viewer
Сообщений: 9
Регистрация: 28.3.2016
Поблагодарили: 3 раза
Репутация:   0  


Что бы я еще тут сделал, так это диву #container дал бы стиль display: none, что бы текст не мигал во время загрузки страницы... Но в таком случае, если у посетителя будет отключен JavaScript в браузере, о этого текста он не увидит вообще...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите с выбором VPS
8 Беркута 1491 24.3.2017, 18:28
автор: FoxCloud
Горячая тема (нет новых ответов) Помогите настроиться на работу с утра
41 notsecret 1399 22.3.2017, 20:34
автор: adjaro
Открытая тема (нет новых ответов) Помогите с мета кейвордс и страницей реги bodypress
0 HavingingWorld 452 13.3.2017, 23:54
автор: HavingingWorld
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыПомогите раскрутить блог....
32 ABCDF 2375 12.3.2017, 14:33
автор: ABCDF
Открытая тема (нет новых ответов) Помогите выбрать плашнет
10 zyzy 590 26.2.2017, 13:22
автор: autolias


 



RSS Текстовая версия Сейчас: 27.3.2017, 12:36
Дизайн