基于jQuery实现的双11天猫拆红包抽奖效果


Posted in Javascript onDecember 01, 2015

本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码,具有点击抽奖后红包摇动并弹出抽奖结果信息的功能,分享给大家供大家参考。具体如下:
运行效果截图如下:

基于jQuery实现的双11天猫拆红包抽奖效果

具体代码如下:

HTML部分:

<div class="opacity" style="display: none;"></div>
<div class="red"><img src="asd23.png"></div>
<div class="windows" style="display: none;">
<div class="text"><a href="aa.html">恭喜抽中棒棒糖一枚!</a></div>
<a href="saved_resource.html">
<div class="close"><img src="close.png"></div>
</a>
</div>

说明:
    .opacity   是抽中奖的遮罩层;
    .red      是抽奖图片;
    .windows   是抽中奖的界面
CSS部分:

@-webkit-keyframes shake {
0%{
-webkit-transform: rotate(2deg) translate3d(0,0,0)
}
50%{
-webkit-transform: rotate(-2deg) translate3d(0,0,0)
}
100%{
-webkit-transform: rotate(2deg) translate3d(0,0,0)
}
}

摇奖的过程,就是利用CSS的transform :rotate。配合animation;

.red {
width:300px;
height:345px;
border-radius:15px;
box-shadow:1px1px20px#666;
position: fixed;
top:50%;
left:50%;
overflow: hidden;
margin-left:-150px;
margin-top:-172px;
transform-origin:50%100%;
-webkit-transform-origin:50%100%;
}

这里,我们让旋转的起点为图片的底部中心。

transform-origin:50%100%;
-webkit-transform-origin:50%100%;

jQuery部分:

$(document).ready(function(){
$(".red").click(function(){
$(this).addClass("shake");
setTimeout(function(){
$(".red").removeClass("shake");
$(".windows").fadeIn();
$(".opacity").fadeIn();
},2000);
});
$(".close").click(function(){
$(this).parent().fadeOut();
$(".opacity").fadeOut();
$(".windows").css("display","none");
})
});

点击按钮,添加shake类。加个定时器,2s后去掉shake类。

demo演示:双11天猫拆红包抽奖效果

demo下载:点进来下载

这就是为大家准备的双十一红包,在即将到来的双十二中大家可以动手实现双12拆红包抽奖功能。

Javascript 相关文章推荐
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 #Javascript
js实现继承的5种方式
Dec 01 #Javascript
6种javascript显示当前系统时间代码
Dec 01 #Javascript
基于jQuery实现网页打印功能
Dec 01 #Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 #Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 #Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
通过自学python能找到工作吗
2020/06/21 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
会议通知范文
2015/04/15 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python