基于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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
用console.table()调试javascript
Sep 04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
第九节--绑定
2006/11/16 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
js中this的用法实例分析
2015/01/10 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
浅谈React碰到v-if
2018/11/04 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python异步存储数据详解
2019/03/19 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python flask搭建web应用教程
2019/11/19 Python
python 贪心算法的实现
2020/09/18 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
UNIX文件系统分类
2014/11/11 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
节水倡议书
2015/01/19 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python