你的位置:首页 > Java教程

[Java教程]天猫双11红包前端jQuery


【01】

 
浏览器支持:IE10+和其他现代浏览器。
 
效果图:
 
123.gif
 
 
步骤:
 

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