README

渲染一个容器，对其直接子元素应用 'marquee' 效果。滚动公告无限循环，当鼠标滚轮在它上面滚动时，滚动公告会加速、减速或改变方向。在生成假 DOM 节点时进行的计算包括边距、填充和边框，因此可以应用于任何类型子元素的任何 CSS 样式。它还具有 'autostop' 功能，当父容器超出屏幕时停止滚动公告。支持任何深度的子节点。JavaScript 中的滚动公告是一个类，其实例的属性可以动态更改。小部件使用 jQuery Mousewheel 插件，更多信息请访问 https://github.com/jquery/jquery-mousewheel

安装

通过 composer 安装此扩展是首选方式。

运行以下命令之一：

php composer.phar require "firstsano/yii2-scrolledmarquee-widget" "*"

或者

"firstsano/yii2-scrolledmarquee-widget" : "*"

将以下内容添加到应用程序的 composer.json 文件的 require 部分。

使用方法

选项

items - array of items that compound the widget. The syntax is as follows:
  string:
    - without tags: is converted to div tag
    - with tags: is processed as precoded html

  array: see Html::tag for documentation. It's keys - name, content, options.
         If the content - is an array, it recursively calls Html::tag.

options - array of options passed to div, containing marqueed elements. Check
          HTML::tag manual, to see the details.

clientOptions - array of options passed to javascript. Option keys are:
  delay: used in setTimeout function. Default value is 42. The less
         value - the faster objects slide.

  autostop: if set to true, objects move only when container is visible. It's
            better for perfomance. Set it to false, if you want objects to move,
            even if they are out of screen. Default: true.

  vector: determines initial direction of marquee, (1) stands for - from right
          to left, (-1) - backwards. Default: (1).

  step: step of scrolling, determines speed of marquee. Default: 1.

  maxStep: max value of step, which is used during scrolling acceleration of
           marquee. Default: 10.

  initialPosition: initial position of marquee, it's first element or last.
                   Default: 'start', any other values equals to 'end'.

使用 ScrolledMarquee

// on your view
<?php $items = [
        'this is simple text element',
        '<a>this is html precoded text</a>',
        [
            'name' => 'a',
            'content' => 'This is html generated element through Html::tag'
        ],
        [
            'name' => 'a',
            'content' => [
                'name' => 'span',
                'content' => 'This is recursively html generated element through Html::tag'
            ]
        ]
];?>
<?= firstsano\scrolledmarquee\ScrolledMarquee::widget(['items' => $items]);?>
// ...

备注：

我创建了这个小部件用于我的项目，但它很容易改进。如果您有任何有趣的想法，请不要犹豫与我联系。反馈邮箱： firstsano@gmail.com