jQuery制作红包雨

首先，先看看效果：

实现步骤如下：

1.我们先写结构，代码如下：

<div class="bigBox"><img src="./img/red.png" alt=""></div>
    <div class="box">
        
        <div class="content"></div>
        <div class="redBox">
            <img src="./img/red.png" alt="">
        </div>
        <div class="time">10s</div>
    </div>

2.写css样式

该红包雨是先有一个大红包，然后进行点击才有小红包落下；

所以小红包刚开始的时候隐藏起来，大红包调至视口居中的位置；

css代码如下：

* {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 250px;
    height: 300px;
    margin: 300px auto;
    transform-origin: 125px 250pxs;
    animation: spin .5s ease infinite;
}

.bigBox img {
    width: 250px;
    height: 300px;
    cursor: pointer;
}
.box{
    display: none;
}
.content {
    position: relative;
    overflow: hidden;
}
.redBox {
    width: 50px;
    height: 70px;
    position: absolute;
    top: -70px;
}
.redBox img {
    width: 50px;
    height: 70px;
}
.time {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

/* 大红包动画 */
@keyframes spin {
    0% {
        transform: rotate(-30deg);
    }

50% {
        transform: rotate(30deg);
    }

100% {
        transform: rotate(-30deg);
    }
}

3.此时导入jQuery的代码并开始写红包雨的动画

具体代码如下：

// 获取小红包及宽高
var redBox = $('.redBox')
var redWidth = redBox.innerWidth()
var redHeight = redBox.innerHeight()
//大红包点击事件
//当点击大红包的时候，大红包隐藏，包裹小红包的盒子就显示，并执行小红包动画
$(".bigBox").click(function () {$(this).css({ display: 'none' })$(".box").css({ display: 'block' })getDown()
})
//封装 随机数
function getRandom(min, max) {return Math.floor(Math.random() * (max - min) + min)
}
//封装红包掉落的动画
function getDown() {// 获取视口的宽高var boxWidth = $(window).innerWidth();var boxHeight = $(window).innerHeight()//获取掉落小红包包裹的盒子var content = $(".content")// 将视口的宽高赋值给包裹的盒子content.css({ 'width': boxWidth + 'px', 'height': boxHeight + 'px' })var timer;var timers;var zIndex = 1;//定时器timer = setInterval(function () {//克隆小红包var newRed = redBox.clone(true)//设置出现的位置以及旋转角度newRed.css({'left': getRandom(0, boxWidth - redWidth) + 'px','z-index': zIndex++,'transform': 'rotate(' + getRandom(-30, 30) + 'deg)'})//添加content.append(newRed)//动画及删除newRed.animate({ top: boxHeight + 'px' },3000,function () {newRed.remove()})}, 30)//时间var count = 10;timers = setInterval(function () {if (count > 0) {count--;$(".time").text(count + "s")} else {clearInterval(timer, timers)}}, 1000)
}

此时代码写完，效果如下：

jQuery制作红包雨相关推荐

北大青鸟 JQuery制作特效第二章（上机练习
北大青鸟 JQuery制作特效第二章 (上机练习练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
喜迎新春，设计一个红包雨小游戏，看看你能赢多少？
目录 0 写在前面 1 准备工作 2 设计HTML+CSS样式 3 设计JavaScript逻辑 0 写在前面红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金.据传明清时期,压岁钱大多数是 ...
百度9亿拿下春晚，今日头条掷10亿红包雨...狂欢背后，互联网圈的品牌“混战”...
又到了一年一度参与数十亿元大项目--开启春节红包大战的时候了! 春节一直被认为是一个观察互联网产品的特殊时期,阶层流动.人群汇聚,尤其对社交产品来说,是一个爆发的好时机,微信红包就是在春节期间崛起的. ...
2017了，回家前年末分享:下雨，飘雪，红包雨，碰撞球，自定义View
(本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示感想代码拆解开源地址效果展示有没有兴趣继续看下去,直接看下"颜值"是第 ...
小程序大转盘红包雨营销组件
前言商城没几个营销活动能叫商城吗? 所以就来几个组件吧,写的不好轻踩,对你有帮助记得给个小星星哦直接上链接github链接运行例子 git clone https://github.com/su ...
转载：JQuery制作的选项卡改进版
JQuery制作的选项卡改进版记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的,题目叫<JQuery制作的选项卡,重点体现在JS与HTML的分离>.最近做项目的时候,再回头看这段代 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
用css动画写一个下红包雨的效果
红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...

jQuery制作红包雨

首先，先看看效果：

实现步骤如下：

1.我们先写结构，代码如下：

2.写css样式

3.此时导入jQuery的代码并开始写红包雨的动画

jQuery制作红包雨相关推荐

最新文章

热门文章