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



 

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

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


Новичок
*

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


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

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


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


Новичок
*

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
6 impak 689 21.11.2017, 17:32
автор: idnex
Открытая тема (нет новых ответов) Помогите с неймингом для сборника советов
советы по разработки и жизни
11 coremission 1685 15.11.2017, 22:23
автор: rogefer
Открытая тема (нет новых ответов) Помогите упростить меню сайта
8 alik2039 627 7.11.2017, 9:55
автор: alik2039
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПомогите, пожалуйста, вопрос по ссылкам
3 Fleshka 795 30.10.2017, 10:41
автор: GlazAlmaz
Открытая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
21 vitvirtual 2313 28.10.2017, 12:39
автор: vitvirtual


 



RSS Текстовая версия Сейчас: 23.11.2017, 7:27
Дизайн