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



 

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

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


Новичок
*

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


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

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


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


Новичок
*

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
4 vitvirtual 300 23.5.2017, 14:12
автор: Silverspam
Открытая тема (нет новых ответов) Помогите - как максимально быстро заполнить форму с данными на сайте!
Как автоматизировать заполнение?
0 autonew 267 20.5.2017, 15:14
автор: autonew
Открытая тема (нет новых ответов) Помогите советом - сайт о беременности и родах
6 lafron 1027 17.5.2017, 19:05
автор: EvgeniyPo
Горячая тема (нет новых ответов) Помогите настроиться на работу с утра
55 notsecret 2439 6.5.2017, 21:47
автор: IrenBlank
Открытая тема (нет новых ответов) Помогите настроить отсылку писем с домена а не с ip
Сабж
0 stixia007 642 18.4.2017, 12:29
автор: stixia007


 



RSS Текстовая версия Сейчас: 30.5.2017, 13:19
Дизайн