>

天猫双11红包前端jQuery,基于jQuery实现的双11天猫

- 编辑:正版管家婆马报彩图 -

天猫双11红包前端jQuery,基于jQuery实现的双11天猫

本文实例汇报了jQuery完成的双11天猫商号拆红包抽取奖品效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽取奖品代码,具备一点点击抽取奖金后红包摇拽并弹出抽取奖品结果音信的效应,分享给咱们供我们参谋。具体如下:
运维效果截图如下:

天猫双11红包前端jQuery,Tmall红包jquery

【01】

  浏览器帮忙:IE10+和另外今世浏览器。   效果图:   图片 1     步骤:  

图片 2

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%;

HTML部分:

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下载:戳小编。   原来的文章链接:      

 

 

【01】 浏览器支持:IE10+和其余当代浏览器。效果图: 步骤: HTML部分: div class = "opacity" style = "di...

<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演示:双11Tmall拆红包抽取奖品效果

demo下载:点步向下载

那正是为我们盘算的双十一红包,在快要赶到的双十二中山大学家能够动手完毕双12拆红包抽取奖金功用。

你也许感兴趣的作品:

  • jquery 年会抽取奖金程序
  • jQuery实现转动随机数抽取奖金效果的主意
  • jquery实现九宫格大转盘抽取奖品
  • jquery转盘抽取奖品成效达成
  • jQuery+PHP完成的掷色子抽取奖品游戏实例
  • jquery输入数字随机抽取奖金特效的总结完毕代码
  • jQuery实现类似苏门答腊虎机滚动抽取奖金效果
  • jquery 抽取奖品小程序完毕代码
  • jQuery+PHP实现微信转盘抽取奖金成效的办法
  • jQuery完结轻巧的抽取奖金游戏

本文由网络计算发布,转载请注明来源:天猫双11红包前端jQuery,基于jQuery实现的双11天猫