不完整抓娃娃

時間 2019-11-25

標籤完整娃娃简体版

原文原文鏈接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .smallicon{
               display: none;
               width: 0px;
               height: 0px;
               position: absolute;
               pointer-events: none;

           }
           .hook{
               width: 100%;
               height: 500px;
           }
           .bar{
               width: 33px;
               height: 100%;
               background:-webkit-gradient(linear, 0 0, 0 bottom, from(#8CEA00), to(rgba(0, 0, 255, 0.5)));
               margin: 0 45%;
               position: relative;

           }

           .zzc{
               width: 70px;
               height: 400px;
               background: #ffffff;
               position: absolute;
               top: 100px;
               left: -20px;
           }

           .hooks{
               width: 80px;
               height: 80px;
               background-image: url(img/gz.jpg);
               background-position: center;
               filter: blur(0px);
               background-size: cover;
               /*background: #8CEA00;*/
               position: absolute;
               top: 0px;
               left: -5px;
           }
           ul{
               list-style: none;
               height: 100px;
               overflow: hidden;
               pointer-events: none;
           }
           ul li{
               float: left;
               width: 150px;
               height: 100px;
               display: block;
               margin:0 40px;

           }
           ul li img{
               width: 150px;
               height: 100px;

           }
           .wawa{
               width: 1100px;
               margin: 0 auto;
               overflow: hidden;
           }
           .footer{
               text-align: center;
           }


       </style>
   </head>
   <body>
       
       <div class="smallicon">
       </div>



       <div class="hook">
           <div class="bar">
               <div class="zzc">
                   <div class="hooks">

                   </div>
               </div>
           </div>



       </div>
       <div class="wawa">
           <ul>
               <li><img src="img/04.jpg" alt="" /></li>
               <li><img src="img/02.jpg" alt="" /></li>
               <li><img src="img/03.jpg" alt="" /></li>
               <li><img src="img/05.jpg" alt="" /></li>
           </ul>
       </div>
       <div class="footer">
           <input type="button" name="start" id="start" value="開始" />
           <input type="button" name="stop" id="stop" value="我抓" />
       </div>



       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script>
           //爪子伸縮設置
           var num=100;
           var zHeight=400;
           var flag=500;
           var setvv=setInterval(function(){
               if(num<500){
                   num++;
                   zHeight--
                   $(".zzc").css("top",num);
                   $(".zzc").css("height",zHeight);
               }else if(flag>100){
                   flag--;
                   zHeight++
                   $(".zzc").css("top",flag);
                   $(".zzc").css("height",zHeight);
               }else if(num>=500&&flag<=100){
                   num=100;
                   zHeight=400;
                   flag=500;
               }
           },2);

           //娃娃動態設置

           var mgLeft=400;
           var mgLeftq=-400;
           var setww=setInterval(function(){
               if(mgLeft>-400){
                   mgLeft--;
                   $(".wawa>ul").css("marginLeft",mgLeft);
               }else if(mgLeftq<400){
                   mgLeftq++;
                   $(".wawa>ul").css("marginLeft",mgLeftq);
               }else if(mgLeft<=-400&&mgLeftq>=400){
                   mgLeft=400;
                   mgLeftq=-400;

               }

           },8)

           $("#stop").on("click",function(){
               var mgl=$(".wawa>ul").css("marginLeft");
//               if(zHeight<10&&)
               console.log(mgl);
               console.log(zHeight);

               if(mgl>-370&&mgl<-330&&zHeight<60){
                   alert("我抓到啦！！");


               }

               clearInterval(setvv);
               clearInterval(setww);
           })

           $("#start").on("click",function(){
               setvv=setInterval(function(){
                   if(num<500){
                       num++;
                       zHeight--
                       $(".zzc").css("top",num);
                       $(".zzc").css("height",zHeight);
                   }else if(flag>100){
                       flag--;
                       zHeight++
                       $(".zzc").css("top",flag);
                       $(".zzc").css("height",zHeight);
                   }else if(num>=500&&flag<=100){
                       num=100;
                       zHeight=400;
                       flag=500;
                   }
               },2);

               setww=setInterval(function(){
                   if(mgLeft>-400){
                       mgLeft--;
                       $(".wawa>ul").css("marginLeft",mgLeft);
                   }else if(mgLeftq<400){
                       mgLeftq++;
                       $(".wawa>ul").css("marginLeft",mgLeftq);
                   }else if(mgLeft<=-400&&mgLeftq>=400){
                       mgLeft=400;
                       mgLeftq=-400;

                   }

               },6)


           })
















           //鼠標移動事件，並在鼠標周圍有一個小方塊跟着移動
           $("body").css({
               "height":$(window).height()-20,
               "width":$(window).width()-20
           });
           $("body").on("mousemove",function(e){
               var clientx=e.offsetX;
               var clienty=e.offsetY;
               if(clienty+20>$(window).height()-20||clientx+20>$(window).width()-20){
                   $(".smallicon").css({
                       "padding":"20px",
                       "left":clientx-30,
                       "top":clienty-30,
                       "display":"block",
                       "background":"#cccccc"
                   })

               }else{
                   $(".smallicon").css({
                       "padding":"20px",
                       "left":clientx-10,
                       "top":clienty-10,
                       "display":"block",
                       "background":"#cccccc"
                   })
               }

           })
       </script>


   </body>
</html>
css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。