基于jQuery实现的双11天猫拆红包抽奖效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于jQuery实现的双11天猫拆红包抽奖效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1767字,纯文字阅读大概需要3分钟。
内容图文
![基于jQuery实现的双11天猫拆红包抽奖效果](/upload/InfoBanner/zyjiaocheng/356/c02ed3b706bd4701a0c0a0e35ae42a37.jpg)
本文实例讲述了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拆红包抽奖功能。
内容总结
以上是互联网集市为您收集整理的基于jQuery实现的双11天猫拆红包抽奖效果全部内容,希望文章能够帮你解决基于jQuery实现的双11天猫拆红包抽奖效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。