走马灯 / Marquee

向左滚动

<div id="marquee1" data-content="这是一句话" class="ui-marquee"></div>

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  new Marquee({
    main: document.getElementById('marquee1'),
    behavior: 'scroll'
  })
  .render();
});

向右滚动

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  new Marquee({
    main: document.getElementById('marquee'),
    behavior: 'scroll',
    direction: 'right'
  })
  .render();
});

向上滚动

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  new Marquee({
    main: document.getElementById('marquee'),
    behavior: 'scroll',
    direction: 'up',
    content: '这是一段话这是一段话这是一段话这是一段话这是一'+
         '段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话'
  })
  .render();
});

还可以滚动一个图片哟

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  new Marquee({
    main: document.getElementById('marquee'),
    behavior: 'scroll',
    content: '<img src="https://www.xnip.cn/wp-content/uploads/2019/10/php.jpg" width="200">',
    width: 200
  })
  .render();
});

通过 api 控制滚动

<div id="marquee" data-content="这是一句话" class="ui-marquee"></div>
<button id="button1">点我开始</button><button id="button2">点我停止</button>

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  var marquee = new Marquee({
    main: document.getElementById('marquee'),
    behavior: 'scroll',
    auto: false,
    hoverable: false
  })
  .render();
  
  marquee.start();

  document.getElementById('button1').onclick = function () {
    marquee.start();
  }
  document.getElementById('button2').onclick = function () {
    marquee.stop();
  }
});

非常长的文本也可以连续滚动

<div
id="marquee"
data-content="这是一句话非常长，非常长，非常长，非常长的话！这是一句话非常长，
非常长，非常长，非常长的话！这是一句话非常长，
非常长，非常长，非常长的话！这是一句话非常长，
非常长，非常长，非常长的话！这是一句话非常长，非常长，
非常长，非常长的话！这是一句话非常长，非常长，非常长，非常长的话！"
class="ui-marquee"
></div>

require(['jquery', 'moye/Marquee'], function ($, Marquee) {
  new Marquee({
    main: document.getElementById('marquee')
  })
  .render();
});