插件描述：直播点击飘心效果,点赞桃心飘动效果,canvas画出桃心飘动效果
更新时间：2019/8/9 下午1:54:15
更新说明：更改飘心效果作者信息
项目需要制作个类似直播点赞打赏的功能，搜索插件库没有
最后找到个类似的自己稍加改造了下
定义好canvas样式，直接引用js文件即可
canvas为js创建 无需用户在DOM中书写
例如：
css：
canvas {
display: block;
position: absolute;
bottom: 100px;
right: -24px;
z-index: 20;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}html中引入：
<script src="flutter-hearts-zmt.js" type="text/javascript" charset="utf-8"></script>
PREVIOUS:
NEXT:
相关插件-动画效果
讨论这个项目（23）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
淡水 0
2019/12/17 16:31:30
-
能不能控制每次爱心出现的数量啊
铭扬工作室 陈1
2021/8/21 15:42:24
把
stage.bubble(images[random.uniformDiscrete(0, images.length - 1)]);
重复复制
ho小邋遢 0
2019/9/19 10:26:04
-
怎么改变飘出的爱心大小，以及飘出的位置？
好名字都被砖家起了0
2019/9/19 10:45:26
直接把img中的图片用psd改一下大小就行了。
飘出的位置修改Css样式中的bottom和right值
canvas {
display: block;
position: absolute;
bottom: 100 px;
right: 104 px;
z - index: 20;
cursor: pointer; -
webkit - tap - highlight - color: rgba(0, 0, 0, 0);
}
ho小邋遢0
2019/9/19 10:54:53
-
我把canvas的宽度调小，弹出的爱心会有些被挡住？怎么不被挡住且宽度变小呢？
好名字都被砖家起了0
2019/9/19 11:38:06
这个动画是在canvas中生成的，你改小了canvas当然超出宽度时会被遮挡了。所以动画的范围不能大于canvas的宽和高。
ho小邋遢0
2019/9/19 11:39:09
-
对，就是这个动画范围怎么改
铭扬工作室 陈1
2021/8/21 15:20:56
图片大小控制，修改： 在代码" img.src = src; "下增加
img.width = 24; img.height = 24;
这样来控制爱心图片的大小
铭扬工作室 陈1
2021/8/21 15:45:06
-
飘出的位置，修改所有 width / 2 ，把数字2修改，1靠右，1.2、1.3、1.4...增加数值来调整图片飘出的定位点
秦时明月? 0
2019/8/9 13:38:28
原著：lixinliang
原著：github地址
https://github.com/lixinliang/bubble-hearts
对原作者说声抱歉
20190809
、Biong 0
2019/3/15 17:19:32
-
换图片后失真严重，怎么调整呢
西瓜0
2019/8/9 15:49:02
-
换的图片太小了，换高质量大图就行了。
奔向没有终点的旅程。0
2019/10/17 18:22:30
-
感觉换了大图没有用
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
