Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Вопрос? Скриншоты

Тема в разделе "Вопросы- ответы", создана пользователем iroder, 19 май 2019.

19.05.19 в 00:40
19.05.19 в 14:44
8
384
0
  1. TopicStarter Overlay
    iroder

    iroder Новичок

    Регистрация:
    7 июн 2015
    Сообщения:
    30
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    Всем привет. Хочу реализовать на сайте одну фичу, как на сайте 24video которая меняет скриншоты виде анимации при наведении на нее. Если кто-то делал у себя подскажите.

    ec364d9b-8090-4990-8445-c46ebdba713b

    движок dle
     
  2. salomonkayn

    PRO Users

    Регистрация:
    23 сен 2018
    Сообщения:
    330
    Лучших ответов:
    1
    Рейтинги:
    +106 / 24 / -0
    Код:
    <img class="js-hover" src='https://img.24video.site/2638/2638147/thumb320_1.jpg' data='https://img.24video.site/2638/2638147/thumb320_2.jpg,https://img.24video.site/2638/2638147/thumb320_3.jpg,https://img.24video.site/2638/2638147/thumb320_3.jpg'>
    
    Код:
    $(function() {
        $('.js-hover').hover(function() {
            var _this = this,
                images = _this.getAttribute('data').split(','),
                counter = 0;
    
            this.setAttribute('data-src', this.src);
            _this.timer = setInterval(function(){
                if(counter > images.length) {
                    counter = 0;
                }
                if (images[counter] != undefined) {
                    _this.src = images[counter];
                } else {
                    _this.src = _this.getAttribute('data-src');
                }
    
                counter++;
            }, 750);
    
        }, function() {
            this.src = this.getAttribute('data-src');
            clearInterval(this.timer);
        });
    });
    
     
    • Нравится Нравится x 1
  3. Tolstyak87

    Tolstyak87 Бывалый

    Регистрация:
    21 мар 2018
    Сообщения:
    555
    Лучших ответов:
    2
    Рейтинги:
    +58 / 18 / -0
  4. TopicStarter Overlay
    iroder

    iroder Новичок

    Регистрация:
    7 июн 2015
    Сообщения:
    30
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    движок dle
     
  5. TopicStarter Overlay
    iroder

    iroder Новичок

    Регистрация:
    7 июн 2015
    Сообщения:
    30
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    salomonkayn Объясни пожалуйста по подробнее. )
     
  6. upload

    PRO Users

    Регистрация:
    9 ноя 2016
    Сообщения:
    192
    Лучших ответов:
    2
    Рейтинги:
    +33 / 5 / -0
    Этот код вставляешь в нужное тебе место, если используешь DLE то в файл shortstory.tpl
    Код:
    <img class="js-hover" src='https://img.24video.site/2638/2638147/thumb320_1.jpg' data='https://img.24video.site/2638/2638147/thumb320_2.jpg,https://img.24video.site/2638/2638147/thumb320_3.jpg,https://img.24video.site/2638/2638147/thumb320_3.jpg'>
    В src='Доп поле основного фото' а в data='вставляешь фото уже которое будет Анимация Через запятую'

    И Js код вставить в любой js файл используемый шаблоном

    Код:
    $(function() {
        $('.js-hover').hover(function() {
            var _this = this,
                images = _this.getAttribute('data').split(','),
                counter = 0;
    
            this.setAttribute('data-src', this.src);
            _this.timer = setInterval(function(){
                if(counter > images.length) {
                    counter = 0;
                }
                if (images[counter] != undefined) {
                    _this.src = images[counter];
                } else {
                    _this.src = _this.getAttribute('data-src');
                }
    
                counter++;
            }, 750);
    
        }, function() {
            this.src = this.getAttribute('data-src');
            clearInterval(this.timer);
        });
    });
     
    • Нравится Нравится x 1
  7. TopicStarter Overlay
    iroder

    iroder Новичок

    Регистрация:
    7 июн 2015
    Сообщения:
    30
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    upload все так и сделал, но почему-то не меняет.

    11.PNG

    22.PNG
     
  8. upload

    PRO Users

    Регистрация:
    9 ноя 2016
    Сообщения:
    192
    Лучших ответов:
    2
    Рейтинги:
    +33 / 5 / -0
    iroder
    Попробуй установить js перед закрывающим тегом </body>
    Код:
    <script type="text/javascript">
        $(function() {
        $('.js-hover').hover(function() {
            var _this = this,
                images = _this.getAttribute('data').split(','),
                counter = 0;
            this.setAttribute('data-src', this.src);
            _this.timer = setInterval(function(){
                if(counter > images.length) {
                    counter = 0;
                }
                if (images[counter] != undefined) {
                    _this.src = images[counter];
                } else {
                    _this.src = _this.getAttribute('data-src');
                }
                counter++;
            }, 750);
        }, function() {
            this.src = this.getAttribute('data-src');
            clearInterval(this.timer);
        });
    });
    </script>
    также у тебя должна быть Подключёна "jquery"
     
  9. TopicStarter Overlay
    iroder

    iroder Новичок

    Регистрация:
    7 июн 2015
    Сообщения:
    30
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    upload Спасибо вам огромное, получилось. Установил js перед закрывающим тегом </body> и все заработал.
     
Похожие темы
  1. allore33
    Ответов:
    12
    Просмотров:
    3.680
  2. Defoz
    Ответов:
    1
    Просмотров:
    316
  3. murzik
    Ответов:
    12
    Просмотров:
    384
  4. medoff
    Ответов:
    7
    Просмотров:
    357
Загрузка...
Яндекс.Метрика