Heim > Web-Frontend > js-Tutorial > Mobile Roulette-Lotterie-Code-Sharing_Javascript-Kenntnisse

Mobile Roulette-Lotterie-Code-Sharing_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:39:45
Original
1706 Leute haben es durchsucht

Der Demonstrationseffekt ist wie folgt:

Kein Unsinn mehr, ich werde einfach den Code für alle posten.

HTML-Teil

<div class="turntableWap top10">
 <table border="0" cellspacing="0">
 <tr>
 <td tag="0"><img src="../images/4.png" alt="Mobile Roulette-Lotterie-Code-Sharing_Javascript-Kenntnisse"></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="Mobile Roulette-Lotterie-Code-Sharing_Javascript-Kenntnisse" ></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>
Nach dem Login kopieren

Da das Karussell für Mobiltelefone gedacht ist, verwendet es im CSS-Teil ein responsives Layout

.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;}
Nach dem Login kopieren

js-Teil

$(".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;
 }
 }
})
Nach dem Login kopieren

Das Obige ist der in diesem Artikel geteilte Code für die mobile Karussell-Lotterie. Ich hoffe, er gefällt Ihnen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage