红包雨效果html,js+css实现红包雨效果

//每一个红包都是相对于父元素定位，通过z-index来设置层级

let zIndex = 1;

function bindEvent() {

$redPackage.on('click','.js-RedPackageBox',function() {

//拿到每个红包的数据

const data = $(this).data('txt');

}

//生成mix-max的随机数

function getRandom(min,max) {

return Math.round(Math.random() * (max - min) + min);

}

//红包的移动

function redPackageBoxSpeed($el,time) {

$el.animate(

{

top: '130%',},time * 1000,function() {

$el.remove();

}

);

}

//生成红包

function createRedPackageNode() {

const $newNode = $redPackageBox.clone(true);

//红包携带的数据

const txt = keyList.shift();

keyList.push(txt);

$newNode.attr('data-txt',JSON.stringify(txt));

//红包随机旋转-30～30度

$newNode.css({

'z-index': zIndex++,left: getRandom(basePadding,maxLeftPx) + 'px',transform: 'rotate(' + getRandom(-30,30) + 'deg)',});

$redPackage.append($newNode);

redPackageBoxSpeed($newNode,4);

}

//红包的动态创建

function createRedPackageRain() {

setInterval(() => {

createRedPackageNode();

},300);

}

function ready() {

bindEvent();

createRedPackageRain();

}

ready();

红包雨效果html,js+css实现红包雨效果相关推荐

html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...
js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述在很多网页中,我们都能看到一个类似于放大镜的效 ...
html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜 ...
js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
HTML+JS+CSS筋斗云导航栏效果
要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> < ...
js+css实现花瓣飘落效果
<div class="main pop-box"></div> css: @keyframes wind{0% {bottom: 100%;transfo ...
小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上
HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离.下面青岛星网跟大家分享下纯CSS的实现方法. 先看下效果 HTML部分 ...
html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...
齿轮 html,body{margin:0;padding:0;width:100%;} #wrap{margin:0;padding:150px;} .post{width:100px;height ...

红包雨效果html,js+css实现红包雨效果

红包雨效果html,js+css实现红包雨效果相关推荐

最新文章

热门文章