jQuery_小瑪莉模擬

In this example below you will see how to do a jQuery_小瑪莉模擬 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mrjohnson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mrjohnson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery_小瑪莉模擬</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="slotWrap">
  <div class="no1 active">彩金10元</div>
  <div class="no2">彩金3180元</div>
  <div class="no3">儲值<br>額外10%獎勵<br>(最高318)</div>
  <div class="no4">彩金318元</div>
  <div class="no10">彩金668元</div>
  <div class="no11"><button>立即抽獎</button></div>

  <div class="no5">彩金30元</div>
  <div class="no9">IPhone X<br>太空灰 256G</div>
  <div class="no8">彩金80元</div>
  <div class="no7">ROLEX<br>Submariner 116610LV<br>綠陶瓷潛航者機械錶</div>
  <div class="no6">彩金688元</div>
  <span class="clear"></span>
  <i class="light light1"></i>
  <i class="light light2"></i>
  <i class="light light3"></i>
  <i class="light light4"></i>
  <i class="light light5"></i>
  <i class="light light6"></i>
  <i class="light light7"></i>
  <i class="light light8"></i>
  <i class="light light9"></i>
  <i class="light light10"></i>
  <i class="light light11"></i>
  <i class="light light12"></i>
  <i class="light light13"></i>
  <i class="light light14"></i>
  <i class="light light15"></i>
  <i class="light light16"></i>
  <i class="light light17"></i>
  <i class="light light18"></i>
  <i class="light light19"></i>
  <i class="light light20"></i>
  <i class="light light21"></i>
  <i class="light light22"></i>
  <i class="light light23"></i>
  <i class="light light24"></i>
  <i class="light light25"></i>
  <i class="light light26"></i>
  <i class="light light27"></i>
  <i class="light light28"></i>
  <i class="light light29"></i>
  <i class="light light30"></i>
</div>

<!-- 彈窗 -->
<div class="popup-wrap" id="letmeopen">
  <div class="popup-box transform-out">
    <h2 id="winPrizes"></h2>
    <h3>恭禧中獎!</h3>
    <p>提中獎品將於24小時內派送到您的帳號內,請於抽獎後儘快上線登錄,避免獎品時效過期。</p>
    <a class="close-btn popup-close" href="#">OK</a>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mrjohnson/jquery_andx5c0fandx746aandx8389andx6a21andx64ec-gvLyNP */
body {
  letter-spacing: 1px;
}
.clear {
  clear: both;
  display: block;
}
.slotWrap {
  width: 800px;
  margin: 0 auto;
  background: #bf3600;
  border-radius: 42px;
  border: 20px solid #f45c01;
  padding: 2px;
  box-shadow: 0 5px 0 2px #c03600;
  position: relative;
}
.slotWrap div {
  width: 198px;
  height: 92px;
  margin: 0 1px 8px;
  background: #ffe74c;
  color: #c55b00;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 2px 0 2px #ffb129;
}
.slotWrap .active {
  color: #fff;
  background: #ef1023;
  box-shadow: 0 0 10px #dc0816;
  position: relative;
}
.slotWrap .no11 {
  background: transparent;
  width: 398px;
  box-shadow: none;
}

button {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  width: 50%;
  height: 80%;
  border: none;
  outline: none;
  padding: 10px 20px;
  border-radius: 20px;
  background: #f14225;
  box-shadow: 0 2px 0 2px #951500;
  color: #fff;
  cursor: pointer;
}
button:active {
  margin-top: 8px;
  box-shadow: 0 -2px 0 2px #951500;
}

.light {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3);
  position: absolute;
  -webkit-animation:1.5s infinite;
          animation:1.5s infinite;
}
.light:nth-child(even) {
  -webkit-animation-name:lightEven;
          animation-name:lightEven;
}
@-webkit-keyframes lightEven {
    0% {
        background: #ffe212;
    }
    50% {
        background: #f45c01;
    }
    100%{
        background: #ffe212;
    }
}
.light:nth-child(odd) {
  -webkit-animation-name:lightOdd;
          animation-name:lightOdd;
}
@-webkit-keyframes lightOdd {
    0% {
        background: #f45c01;
    }
    50% {
        background: #ffe212;
    }
    100%{
        background: #f45c01;
    }
}
.light1 {
  top: -1%;
  left: -1%;
}
.light2 {
  top: -5%;
  left: 10%;
}
.light3 {
  top: -5%;
  left: 20%;
}
.light4 {
  top: -5%;
  left: 30%;
}
.light5 {
  top: -5%;
  left: 40%;
}
.light6 {
  top: -5%;
  left: 50%;
}
.light7 {
  top: -5%;
  left: 60%;
}

.light8 {
  top: -5%;
  left: 70%;
}
.light9 {
  top: -5%;
  left: 80%;
}
.light10 {
  top: -5%;
  left: 90%;
}
.light11 {
  top: -1%;
  right: -1%;
}
.light12 {
  top: 20%;
  left: 100.5%;
}
.light13 {
  top: 40%;
  left: 100.5%;
}
.light14 {
  top: 60%;
  left: 100.5%;
}
.light15 {
  top: 80%;
  left: 100.5%;
}
.light16 {
  bottom: -1%;
  right: -1%;
}
.light17 {
  bottom: -5%;
  left: 90%;
}
.light18 {
  bottom: -5%;
  left: 80%;
}
.light19 {
  bottom: -5%;
  left: 70%;
}
.light20 {
  bottom: -5%;
  left: 60%;
}
.light21 {
  bottom: -5%;
  left: 50%;
}
.light22 {
  bottom: -5%;
  left: 40%;
}
.light23 {
  bottom: -5%;
  left: 30%;
}
.light24 {
  bottom: -5%;
  left: 20%;
}
.light25 {
  bottom: -5%;
  left: 10%;
}
.light26 {
  bottom: -1%;
  left: -1%;
}
.light27 {
  top: 80%;
  right: 100.5%;
}
.light28 {
  top: 60%;
  right: 100.5%;
}
.light29 {
  top: 40%;
  right: 100.5%;
}
.light30 {
  top: 20%;
  right: 100.5%;
}

/* 彈窗 */
.popup-wrap {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, 0.85);
}

.popup-box {
  width: 50%;
  padding: 75px 75px 200px;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: #bf3600;
  box-shadow: 0 0 10px #dc0816;
}
h2 {
  font-size: 48px;
  font-weight: normal;
  color:#F77845;
}

h3 {
  font-size: 40px;
  background: #ffe74c;
  color: #c55b00;
  margin-left:-95px;
  margin-right:-95px;
  padding-top:20px;
  padding-bottom:20px;
  position: relative;
}
h3:before{
  content:"";
  position: absolute;
  top: -20px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0px 20px 20px;
  border-color: transparent transparent #BCA50C transparent;
}
h3:after{
  content:"";
  position: absolute;
  top: -20px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0px 20px;
  border-color: transparent transparent transparent #BCA50C;
}
p{
  font-size: 24px;
  color:#F77845;
  text-align: left;
}
.close-btn {
  display: inline-block;
  position: absolute;
  bottom:40px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width:80%;
  border-radius: 40px;
  border:1px solid #F77845;
  font-weight: bold;
  text-decoration: none;
  color: #F77845;
  line-height: 80px;
  font-size: 32px;
  transition:.5s;
}
.close-btn:hover{
  background:#f14225;
  color:#fff;
}
.transform-in, .transform-out {
  display: block;
  transition: all ease 0.5s;
}

.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
}

/*Downloaded from https://www.codeseek.co/mrjohnson/jquery_andx5c0fandx746aandx8389andx6a21andx64ec-gvLyNP */
// var no = 0;
// var stopPlay = 0;
// var runTimes = 0;
// var sec = 50;

// function play() {
//   no++;
//   runTimes++;
//   if (no >= 11) {
//     no = 1;
//   }
//   // console.log("no:"+no+"      runTimes:" + runTimes+"     stopPlay:" + stopPlay);
//   if (runTimes > stopPlay) {
//     $("button").attr("disabled", false);
//     alert($(".active").text());
//   } else if (runTimes + 10 > stopPlay) {
//     $(".no" + no)
//       .addClass("active")
//       .siblings()
//       .removeClass("active");
//     setTimeout(play, (sec = sec * 1.4));
//   } else {
//     $(".no" + no)
//       .addClass("active")
//       .siblings()
//       .removeClass("active");
//     setTimeout(play, sec);
//   }
// }

// $("button").click(function() {
//   $(this).attr("disabled", true);
//   runTimes = 0;
//   sec = 50;
//   no = no - 1;
//   stopPlay = Math.floor(Math.random() * (20 - 0) + 20);
//   play();
// });

// 小倩版本
var no = 0;
var stopPlay = 0;
var runTimes = 0;
var sec = 50;

init();
function play() {
  no++;
  runTimes++;
  if (no >= 11) {
    no = 1;
  }
  //console.log("no:"+no+"      runTimes:" + runTimes+"     stopPlay:" + stopPlay);
  if (runTimes > stopPlay) {
    //$("button").attr("disabled",false);
    $(".light").css("animation-duration", "2s");
    // alert($(".active").text());
    // 彈窗效果
    var href = $("#letmeopen");
    $(href).fadeIn(250);
    $("#winPrizes").text($(".active").text());
    $(href).children$("popup-box").removeClass("transform-out").addClass("transform-in");
    e.preventDefault();
  } else if (runTimes + 10 > stopPlay) {
    $(".no" + no)
      .addClass("active")
      .siblings()
      .removeClass("active");
    setTimeout(play, (sec = sec * 1.4));
  } else {
    $(".no" + no)
      .addClass("active")
      .siblings()
      .removeClass("active");
    setTimeout(play, sec);
    $(".light").css("animation-duration", ".3s");
  }
}
function init() {
  runTimes = 0;
  sec = 50;
  no = no - 1;
  $("button").attr("disabled", false);
}
$("button").click(function() {
  if (runTimes > 0) return;
  // console.log("run");
  stopPlay = Math.floor(Math.random() * (20 - 0) + 20);
  $(this).attr("disabled", true);
  play();
});

// 彈窗效果
// $(".popup-btn").click(function() {
//   var href = $(this).attr("href");
//   $(href).fadeIn(250);
//   $(href)
//     .children$("popup-box")
//     .removeClass("transform-out")
//     .addClass("transform-in");
//   e.preventDefault();
// });

$(".popup-close").click(function() {
  init();
  $(".popup-wrap").fadeOut(200);
  $(".popup-box")
    .removeClass("transform-in")
    .addClass("transform-out");
  e.preventDefault();
});

Comments