基于jQuery实现的双11天猫拆红包抽奖效果
2015-12-01 16:08
901 查看
本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码,具有点击抽奖后红包摇动并弹出抽奖结果信息的功能,分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
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拆红包抽奖功能。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作