mybubble v1.0.1

多主题气泡轮播

使用示例：

step1: 安装

npm install bubble

step2: 使用

example1

const mydom = document.createElement("div");
mydom.classList.add('new_dom');
const p1 = document.createElement("p");
p1.innerHTML = '1111111';
const p2 = document.createElement("p");
p2.innerHTML = '2222222';
mydom.appendChild(p1);
mydom.appendChild(p2);
const bodyEle = document.getElementsByTagName('body')[0];
bodyEle.appendChild(mydom);

let bubble1 = new Bubble({
    el: mydom,             //滚动容器
    theme: 'tb-common',    //选择的主题
    waitTime: '3000'       //滚动停顿的时间（ms为单位）
})

example2（两层结构即可）

<div id="bubbletips_box">
    <div>111111111111</div>
    <div>2222222222</div>
    <div>33333333333333</div>
    <div>444</div>
    <div>55555</div>
</div>

let bubble2 = new Bubble({
    el: '#bubbletips_box', //滚动容器
    theme: 'lr-shake',     //选择的主题
    waitTime: '3000'       //滚动停顿的时间（ms为单位）
})

主题说明

• tb-common 从下向上滚动 正常无抖动
• lr-common 从左向右滚动 正常无抖动
• lr-shake 从左向右滚动 中间有抖动

step3: 引用

const bubble = require('bubble'); //引入bubbleTips插件

step4: 自己需要附加的样式示例（按需修改）

.bubbletips_box{
  height: 10px;           //容器高度

.bubbletips_box>* {
    color: red;           //子元素字体颜色
    font-size: 0.26rem;   //子元素字体大小
  }
}