Maison > interface Web > js tutoriel > Partage de code de loterie de roulette mobile_Compétences Javascript

Partage de code de loterie de roulette mobile_Compétences Javascript

WBOY
Libérer: 2016-05-16 15:39:45
original
1706 Les gens l'ont consulté

L'effet de démonstration est le suivant :

Plus de bêtises, je posterai juste le code pour tout le monde.

partie html

<div class="turntableWap top10">
 <table border="0" cellspacing="0">
 <tr>
 <td tag="0"><img src="../images/4.png" alt="Partage de code de loterie de roulette mobile_Compétences Javascript"></td>
 <td tag="1" class="even"><img src="../images/6.png" alt="6元"></td>
 <td tag="2"><img src="../images/8.png" alt="8元"></td>
 <td tag="3" class="even"><img src="../images/11.png" alt="11元"></td>
 </tr>
 <tr>
 <td tag="13" class="even"><img src="../images/13.png" alt="13元"></td>
 <td colspan="2" rowspan="3" class="zpBtn"><img  src="../images/zpBtn.jpg" / alt="Partage de code de loterie de roulette mobile_Compétences Javascript" ></td>
 <td tag="4"><img src="../images/40.png" alt="40元"></td>
 </tr>
 <tr>
 <td tag="12"><img src="../images/80.png" alt="80元"></td>
 <td tag="5" class="even"><img src="../images/125.png" alt="125元"></td>
 </tr>
 <tr>
 <td tag="11" class="even"><img src="../images/250.png" alt="250元"></td>
 <td tag="6"><img src="../images/400.png" alt="400元"></td>
 </tr>
 <tr>
 <td tag="10"><img src="../images/1000.png" alt="1000元"></td>
 <td tag="9" class="even"><img src="../images/iphone6.png" alt="iphone6"></td>
 <td tag="8"><img src="../images/Thank2.png" alt="谢谢惠顾"></td>
 <td tag="7" class="even"><img src="../images/500.png" alt="500元"></td>
 </tr>
 </table>
 </div>
Copier après la connexion

Pour la partie css, le carrousel étant destiné aux téléphones portables, il utilise une mise en page responsive

.turntableWap{ padding:1rem; background:url(../images/zpTabBg.jpg) no-repeat center; background-size:100% 100%;}
.turntableWap table{ width:100%;}
.turntableWap table td{ vertical-align:middle; text-align:center; background-color:#ecd295;}
.turntableWap table td img{ width:100%; }
.turntableWap table td.even{background-color:#f6e8c5}
.turntableWap table td.active{ background-color:#ed9351;}
Copier après la connexion

partie js

$(".turntableWap .table").css({"height":$(".turntableWap .table").width()});//做响应式布局,外table是等宽高
var isdo = true;
$(".zpBtn").on("click",function(){
 var num = 13;//后台传入的奖品
 var rotaNum = 14;//奖品数量
 var count = -1;//高亮显示,旋转特效
 var jishi = 0;//计时时间段
 var speed = 50;//快速速度
 var speedSlow = 200;//慢速速度
 choujiang()//抽奖方法调用,在此处做判断调用choujiang(),并给num值
 function choujiang(){
 if(isdo){
  isdo=false;
  $(".turntableWap").css({"background-image":"url(../images/1.gif)"})
  var c = setInterval(function(){
  if(count >12){
   count = -1;
  }
  count = count+1;
  jishi = jishi+1;
  $(".turntableWap td").removeClass("active");
  $(".turntableWap td[tag="+count+"]").addClass("active");
  if(jishi>rotaNum*2){
   clearInterval(c);
   c = setInterval(function(){
   count = count+1;
   jishi = jishi+1;
   $(".turntableWap td").removeClass("active");
   $(".turntableWap td[tag="+count+"]").addClass("active");
   if(jishi>num+rotaNum*2){
    clearInterval(c);
    $(".turntableWap").css({"background-image":"url(../images/zpTabBg.jpg)"})
    isdo = true;
    var jp = $(".turntableWap td[tag="+count+"]").find("img").attr("alt")
    alert("恭喜您获取"+jp)
   }
   },speedSlow)
  }
  },speed)
 }else{
  return;
 }
 }
})
Copier après la connexion

Ce qui précède est le code de loterie du carrousel mobile partagé dans cet article. J'espère qu'il vous plaira.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal