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



 

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

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


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 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
Сообщений: 3314
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2649 раз
Репутация:   285  


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

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


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


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 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
Сообщений: 35
Регистрация: 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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
18 vitvirtual 1370 19.8.2017, 8:46
автор: WoWeb
Открытая тема (нет новых ответов) Помогите - как максимально быстро заполнить форму с данными на сайте!
Как автоматизировать заполнение?
6 autonew 675 15.8.2017, 13:32
автор: medicine4live
Открытая тема (нет новых ответов) Ошибка карты сайта Sitemap. Помогите исправить, пожалуйста
6 July82 1841 2.8.2017, 16:12
автор: Еремин
Открытая тема (нет новых ответов) Помогите пожалуйста с редиректом
4 Anna_Shalashova 1103 29.7.2017, 21:30
автор: AlexeyDry
Открытая тема (нет новых ответов) Помогите убрать вывод заголовка категории в новостях. DLE
7 Mukis 652 11.7.2017, 19:53
автор: Mukis


 



RSS Текстовая версия Сейчас: 22.8.2017, 16:56
Дизайн