MyukiDanMu:一个简单的弹幕插件(原创)

所属分类:UI,其他-工具提示,独立的部件

 11320  59  查看评论 (2)
分享到微信朋友圈
X
MyukiDanMu:一个简单的弹幕插件(原创) ie兼容11

更新时间:2022-10-09 23:01:01

1. 创建一个MyukiDanMu实例

//可以直接创建一个简单的实例:let obj = $MDM();
//可以直接给window绑定一个MyukiDanMu实例
window.danmuObj = $MDM({
  locate:'.AwesomeDanMu', //定位元素,需要事先设置宽高
  color:'#48dbfb', /**默认字体和鼠标悬浮时的阴影颜色
  默认值:#48dbfb
  */
  curtain:'url(./img/curtain.jpg)', /**
  弹幕墙的背景,可以是图片,也可以是颜色,比如
  - 颜色:#57606f
  - 图片:url(./img/curtain.jpg)
  默认值:#57606f
  */
  speed: 8, /**弹幕从左移动到右的时长,
  单位:s(秒),
  默认值:8
  因为所有弹幕的运动时间相等,所以弹幕越长,速度越快
  */
  avatar: './img/avatar.jpg',/**默认弹幕的头像,
  如果不设置将不显示头像
  */
  pool:[],/**
  弹幕池,可以在创建完MyukiDanMu实例后再提供
  */
  maxPoolDelay: 5, /**两条弹幕时间间隔的最大值
  单位:s,
  默认值:5
  */
  minPoolDelay: 1,/**两条弹幕时间间隔的最小值
  单位:s,
  默认值:1
  */
  maxDanMuWidth: 250, /**
  弹幕的最大长度,
  单位:px
  如果不提供,将使用弹幕墙宽度的两倍作为弹幕最大长度
  */
});
```

2. 使用MyukiDanMu实例发送一条弹幕

简单用法

danmuObj.shot("我是一条弹幕");
// 高级用法
danmuObj.shot({
danmu: '我是一条弹幕',/**
弹幕内容
*/
  color: '#48dbfb',/**
  弹幕颜色,可选,不提供将使用创建实例是设置的color
  */
  id: 'xxx',/**
  弹幕id,可选
  */
  url: '/#xxx',/**
  弹幕链接地址,可选
  */
  avatar: './img/avatar.jpg',/**
  弹幕头像,可选
  */
});

3. 使用弹幕实例发送弹幕池

let pool = [
  {
    danmu: '我是一条弹幕',
    color: '#1e90ff',
    href: '#111',
    avatar: './img/avatar1.jpg'
  },
  {
    danmu: '我是另一条弹幕',
    color: '#1e90ff',
    href: '#222',
    avatar: './img/avatar1.jpg'
  },
  {
    danmu: '我还是一条弹幕',
    color: '#1e90ff',
    href: '#333',
    avatar: './img/avatar1.jpg'
  },
]
danmuObj.shotPool(pool);


相关插件-工具提示,独立的部件

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 48678  407

jQuery网页新功能步骤引导

在网站上经常看到的网页新功能步骤引导
  工具提示
 28268  356

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 30304  375

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 33102  312

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    户名错误 0
    2024/3/20 11:31:22
    不能循环?
        boringnomyukikun0
        2024/4/5 20:39:35
        不错的想法
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复