JQuery - приостановить анимацию / добавить следующую кнопку - PullRequest
Новая
       2

JQuery - приостановить анимацию / добавить следующую кнопку

0 голосов
/ 30 октября 2019

У меня есть CodePen того, что я создал (с помощью других источников), и все выглядит великолепно. Мне нужна возможность нажимать на текст (или на страницу) и приостанавливать цикл JQuery. А также возможность щелкнуть по нему еще раз, чтобы возобновить его. CodePen Link

Если это слишком сложно, я хотел бы взглянуть на кнопку Далее, чтобы я мог вручную переключиться на следующую строку, а также кнопку ручного переключения на основную строку<li>#SSBASKETBALL&nbsp;&nbsp;|&nbsp;&nbsp;SUMMERSERIES.NZ</li>

Кнопка должна быть внизу, так как она является частью браузера OBS.

Если кто-то может помочь мне с этим, пожалуйста, не стесняйтесь. Это делает работу в данный момент, но я действительно хотел бы включить это более профессионально и иметь больший контроль над этим. Ура! 

(function($) {
  $.simpleTicker = function(element, options) {
    var defaults = {
      speed: 800,
      delay: 10000,
      easing: 'swing',
      effectType: 'fade'
    }
    var param = {
      'ul': '',
      'li': '',
      'initList': '',
      'ulWidth': '',
      'liHeight': '',
      'tickerHook': 'tickerHook',
      'effect': {}
    }

    var plugin = this;
    plugin.settings = {}
    var $element = $(element),
      element = element;

    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
      param.ul = element.children('ul');
      param.li = element.find('li');
      param.initList = element.find('li:first');
      param.ulWidth = param.ul.width();
      param.liHeight = param.li.height();

      element.css({
        height: (param.liHeight)
      });
      param.li.css({
        top: '0',
        left: '0',
        position: 'absolute'
      });


      switch (plugin.settings.effectType) {
        case 'fade':
          plugin.effect.fade();
          break;
        case 'roll':
          plugin.effect.roll();
          break;
        case 'slide':
          plugin.effect.slide();
          break;
      }
      plugin.effect.exec();
    }

    plugin.effect = {};
    plugin.effect.exec = function() {
      param.initList.css(param.effect.init.css)
        .animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
        .addClass(param.tickerHook);
      setInterval(function() {
        element.find('.' + param.tickerHook)
          .animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
          .next()
          .css(param.effect.next.css)
          .animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
          .addClass(param.tickerHook)
          .end()
          .appendTo(param.ul)
          .css(param.effect.end.css)
          .removeClass(param.tickerHook);
      }, plugin.settings.delay);
    }

    plugin.effect.fade = function() {
      param.effect = {
        'init': {
          'css': {
            display: 'block',
            opacity: '0'
          },
          'animate': {
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            opacity: '0'
          }
        },
        'next': {
          'css': {
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            opacity: '1'
          }
        },
        'end': {
          'css': {
            display: 'none',
            zIndex: '98'
          }
        }
      }
    }

    plugin.effect.roll = function() {
      param.effect = {
        'init': {
          'css': {
            top: '-3em',
            display: 'block',
            opacity: '0'
          },
          'animate': {
            top: '0',
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            top: '3em',
            opacity: '0'
          }
        },
        'next': {
          'css': {
            top: '-3em',
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            top: '0',
            opacity: '1'
          }
        },
        'end': {
          'css': {
            zIndex: '98'
          }
        }
      }
    }

    plugin.effect.slide = function() {
      param.effect = {
        'init': {
          'css': {
            left: (-(200)),
            display: 'block',
            opacity: '0'
          },
          'animate': {
            left: '0',
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            left: (200),
            opacity: '0'
          }
        },
        'next': {
          'css': {
            left: (param.ulWidth),
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            left: '0',
            opacity: '1'
          }
        },
        'end': {
          'css': {
            zIndex: '98'
          }
        }
      }
    }

    plugin.init();
  }

  $.fn.simpleTicker = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('simpleTicker')) {
        var plugin = new $.simpleTiecker(this, options);
        $(this).data('simpleTicker', plugin);
      }
    });
  }
})(jQuery);

$(function() {
  $.simpleTicker($('#js-ticker-fade'), {
    'effectType': 'fade'
  });
  $.simpleTicker($('#js-ticker-roll'), {
    'effectType': 'roll'
  });
  $.simpleTicker($('#js-ticker-slide'), {
    'effectType': 'slide'
  });
});
@font-face {
  font-family: "DharmaGothicEW01-Light";
  src: url("https:https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.eot");
  src: url("https:https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.woff") format("woff"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.svg#DharmaGothicEW01-Light") format("svg");
}

@font-face {
  font-family: "DharmaGothicEW01-Bold";
  src: url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.eot");
  src: url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.woff") format("woff"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.svg#DharmaGothicEW01-Bold") format("svg");
}

* {
  font-size: 32px;
  word-spacing: 5px;
  font-family: DharmaGothicEW01-Light;
  text-align: center;
  color: #000;
}

.hvhbox {
  display: inline-block;
  width: 50px;
  border: 0px solid #000;
  background: #fe3249;
  text-align: center;
}

.simple-ticker {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 30px;
  border: 0px solid #ddd;
  overflow: hidden;
}

.simple-ticker ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.simple-ticker ul li {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery simple news ticker</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->


  <section>
    <div class="simple-ticker" id="js-ticker-roll">
      <ul>
        <li>#SSBASKETBALL&nbsp;&nbsp;|&nbsp;&nbsp;SUMMERSERIES.NZ</li>
        <li>THE SUMMER SERIES 20:&nbsp;<span style="background: #979797; color: #fff;">&nbsp;HUTT VALLEY </span>&ensp;VS&ensp;<span style="background: #0053a3; color: #fff;">&nbsp;UPPER HUTT&nbsp;</span></li>
        <li>THE SUMMMER SERIES IS PROUDLY SUPPORTED BY TRIPLE THREAT</li>
        <li><span style="background: #0053a3; color: #fff">&nbsp;UHC </span>&nbsp;RJ WICHMAN&emsp;13 PTS</li>
        <li><span style="background: #979797; color: #fff;">&nbsp;HVH </span>&ensp;25% [1/4]&emsp;&emsp;3PT PERCENTAGE&emsp;&emsp;20% [1/5]&ensp;<span style="background: #0053a3; color: #fff;">&nbsp;UHC&nbsp;</span></li>
        <!-- <li>NEXT UP:&nbsp;<span style="background: #fb1414; color: #fff;">&nbsp;SACRED HEART </span>&ensp;VS&ensp;<span style="background: #fff200; color: #000;">&nbsp;WELLINGTON EAST&nbsp;</span></li> -->



      </ul>
    </div>
  </section>


  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src="./script.js"></script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...