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

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

 7834  54  查看评论 (0)
分享到微信朋友圈
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);


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

jQuery网页新功能步骤引导

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

jquery 工具提示插件awTooltip

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

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 38314  435

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 29079  343

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复