js实现直播点击飘心效果

2023-07-18 13:54:04 222

本文实例为大家分享了js实现直播点击飘心效果的具体代码，供大家参考，具体内容如下





直播点击飘心效果

html,body{
height:100%;
position:relative;
width:100%;
}
canvas{
display:block;
position:absolute;
bottom:100px;
right:-24px;
z-index:20;
cursor:pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.journal-reward{
position:absolute;
bottom:70px;
right:20px;
height:60px;
width:60px;
display:block;
z-index:21;
cursor:pointer;
}

flutter-hearts-zmt.js

!function(t,e){
"object"==typeofexports&&"undefined"!=typeofmodule?module.exports=e():"function"==typeofdefine&&define.amd?define(e):t.BubbleHearts=e()
}(this,function(){
"usestrict";

functiont(t,n,r){
vari=e.uniformDiscrete(89,91)/100,
o=1-i,
u=(e.uniformDiscrete(45,60)+e.uniformDiscrete(45,60))/100,
a=function(t){
returnt>i?Math.max(((1-t)/o).toFixed(2),.1)*u:u
},
c=e.uniformDiscrete(-30,30),
f=function(t){
returnc
},
h=10,
s=n.width/2+e.uniformDiscrete(-h,h),
d=(n.width-Math.sqrt(Math.pow(t.width,2)+Math.pow(t.height,2)))/2-h,
l=e.uniformDiscrete(.8*d,d)*(e.uniformDiscrete(0,1)?1:-1),
m=e.uniformDiscrete(250,400),
w=function(t){
returnt>i?s:s+l*Math.sin(m*(i-t)*Math.PI/180)
},
v=function(e){
returnt.height/2+(n.height-t.height/2)*e
},
p=e.uniformDiscrete(14,18)/100,
g=function(t){
returnt>p?1:1-((p-t)/p).toFixed(2)
};
returnfunction(e){
if(!(e>=0))return!0;
r.save();
varn=a(e),
i=f(e),
o=w(e),
u=v(e);
r.translate(o,u),r.scale(n,n),r.rotate(i*Math.PI/180),r.globalAlpha=g(e),r.drawImage(t,-t.width/2,-t.height/2,t.width,t.height),r.restore()
}
}
vare=function(t){
vare=t,
n=Math.floor,
r=Math.random;
returnt.uniform=function(t,e){
returnt+(e-t)*r()
},t.uniformDiscrete=function(t,r){
returnt+n((r-t+1)*e.uniform(0,1))
},t
}({}),
n=function(t,e){
if(!(tinstanceofe))thrownewTypeError("Cannotcallaclassasafunction")
},
r=function(){
functiont(t,e){
for(varn=0;n1&&void0!==arguments[1]?arguments[1]:e.uniformDiscrete(2400,3600),
i=arguments.length>2&&void0!==arguments[2]?arguments[2]:t(n,this.canvas,this.context);
returnthis._children.push({
render:i,
duration:r,
timestamp:+newDate
}),this
}
}]),o
}();
returno
});
//图片地址在此处更换可换成你的图片
varassets=[
'img/1.png',
'img/2.png',
'img/3.png',
'img/4.png',
'img/5.png',
];
assets.forEach(function(src,index){
assets[index]=newPromise(function(resolve){
varimg=newImage;
img.onload=resolve.bind(null,img);
img.src=src;
});
});

Promise.all(assets).then(function(images){

varrandom={
uniform:function(min,max){
returnmin+(max-min)*Math.random();
},
uniformDiscrete:function(i,j){
returni+Math.floor((j-i+1)*random.uniform(0,1));
},
};

varstage=newBubbleHearts();
varcanvas=stage.canvas;
canvas.width=170;
canvas.height=300;
canvas.style['width']='170px';
canvas.style['height']='300px';
document.body.appendChild(canvas);
//journal-reward为赏桃的按钮
document.getElementsByClassName('journal-reward')[0].addEventListener('click',function(){
//随机飘动
stage.bubble(images[random.uniformDiscrete(0,images.length-1)]);

},false);

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现直播点击飘心效果

热门推荐

随机推荐