老虎机抽奖

最新推荐文章于 2024-01-17 14:54:46 发布

小胡同志0526

最新推荐文章于 2024-01-17 14:54:46 发布

阅读量881

点赞数

分类专栏：前端日常笔记文章标签： js

本文链接：https://blog.csdn.net/sinat_35656188/article/details/79257578

版权

前端日常笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一、代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telphone=no, email=no">

<head>
   <title></title>
</head>
<style type="text/css">

/* === CSS Reset ========== */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }
input, button, select, textarea, a:fouse {outline:none}
li {list-style:none;}
img {border:none;}
textarea {resize:none;}
body { margin: 0; font: 12px "微软雅黑"; background-color: #2D2D2D; }
/* === End CSS Reset ========== */

body{width:100%;
}
a{
    text-decoration: none;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}

.container{
   width:320px;
    margin: 0 auto;
    position: relative;
}

.main2{
    background: url("images/main0.gif") no-repeat center;
   background-size:100%;
    height: 260px;
   width:320px;
   margin:0 auto;
}
.num{
    position: absolute;
    top: 80px;
    width: 210px;
    height: 67px;
    overflow: hidden;
}
.num-con{
    position: relative;
    top:-274px;
}
.num-img{
    background: url("images/num1.png") no-repeat;
    width: 210px;
    height: 750px;
}
.num2{
    left:12%;
}
.main3-btn{
    cursor: pointer;
    height: 39px;
    left: 25%;
    position: absolute;
    top: -71px;
    width: 152px;
}
</style>
<body>
<div class="main2">
   <div class="container">
       <div class="num num2">
           <div class="num-con num-con2">
               <div class="num-img"></div>
               <div class="num-img"></div>
           </div>
       </div>
   </div>
</div>
<div class="main3">
   <div class="container">
       <div class="main3-btn"></div>
   </div>
</div>
</body>
</html>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
   $(".main3-btn").click(function () {
       if(!flag){
           flag=true;
           reset();
           letGo();
           setTimeout(function () {
               flag=false;
               if(index==2){
                   $(".fix,.pop-form").show();
               }else{
                   $(".fix,.pop").show();
                   //$(".pop-text span").text(""+String(4-TextNum1)+(8-TextNum2))
               }
           },2000);
           index++;
       }
   });

   var flag=false;
   var index=0;
   var TextNum2
   function letGo(){
       TextNum2=parseInt(Math.random()*7)
       var num2=[-750,-820,-888,-274,-341,-408,-477,-545][TextNum2];
       $(".num-con2").animate({"top":-750},1000,"linear", function () {
           $(this).css("top",0).animate({"top":num2},1800,"linear");
       });
   }
   function reset(){
       $(".num-con2").css({"top":-274});
   }
</script>

二、图片

小胡同志0526

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
老虎机抽奖

一、代码 /* === CSS Reset ========== */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td,
复制链接

扫一扫