天猫双11红包前端jQuery

【01】

 

浏览器支持：IE10+和其他现代浏览器。

 

效果图：

 

 

 

步骤：

 

HTML部分：

 

1. <div class="opacity" style="display: none;"></div>
2. <div class="red"><img src="asd23.png"></div>
3. <div class="windows" style="display: none;">
4. <div class="text"><a href="aa.html">恭喜抽中棒棒糖一枚！</a></div>
5. <a href="saved_resource.html">
6. <div class="close"><img src="close.png"></div>
7. </a>
8. </div>

 

说明：

• .opacity   是抽中奖的遮罩层；
• .red      是抽奖图片；
• .windows   是抽中奖的界面

 

 

 

CSS部分：

 

1. @-webkit-keyframes shake {
2. 0%{
3. -webkit-transform: rotate(2deg) translate3d(0,0,0)
4. }
5. 50%{
6. -webkit-transform: rotate(-2deg) translate3d(0,0,0)
7. }
8. 100%{
9. -webkit-transform: rotate(2deg) translate3d(0,0,0)
10. }
11. }

 

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

 

 

1. .red {
2. width:300px;
3. height:345px;
4. border-radius:15px;
5. box-shadow:1px1px20px#666;
6. position: fixed;
7. top:50%;
8. left:50%;
9. overflow: hidden;
10. margin-left:-150px;
11. margin-top:-172px;
12. transform-origin:50%100%;
13. -webkit-transform-origin:50%100%;
14. }

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

 

1.         transform-origin:50%100%;
2. -webkit-transform-origin:50%100%;

 

 

jQuery部分：

1. $(document).ready(function(){
2. $(".red").click(function(){
3. $(this).addClass("shake");
4. setTimeout(function(){
5. $(".red").removeClass("shake");
6. $(".windows").fadeIn();
7. $(".opacity").fadeIn();
8. },2000);
9. });
10. $(".close").click(function(){
11. $(this).parent().fadeOut();
12. $(".opacity").fadeOut();
13. $(".windows").css("display","none");
14. })
15. });

 

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

 

demo下载：戳我。

 

原文链接：http://www.cnblogs.com/moyuling/p/b0cf82569bb978abe9e7179417f2d761.html