文档章节

不完整抓娃娃

龙哥ge
 龙哥ge
发布于 2017/06/27 17:14
字数 667
阅读 8
收藏 0

<!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>
        <!--
        1.判断图片的位置
        2.下面区域每次向左平移,并且将过期的图片循环插入到下方区域中
        3.上面的爪子每次缓慢向下延伸,到达最长时判断该爪子中心点坐在的位置是否在图像中心位置,
            是将图片和爪子同时做向上平移运动,否则爪子自己缓慢缩回
        4.当爪子和图片上移到一定位置时,判断抓到娃娃,并做后续处理
        
        -->
        <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>
 

© 著作权归作者所有

龙哥ge
粉丝 0
博文 69
码字总数 57107
作品 0
合肥
前端工程师
私信 提问
在线抓娃娃的基本技术架构

线上视频抓娃娃风口正劲。用户可以通过手机遥控实体娃娃机,从正面与侧面两个视角判断爪子的位置,如果抓到了娃娃,可以选择寄送到家。短短几个月内,正式和即将上线的远程视频抓娃娃App和平...

Agora
2017/11/07
0
0
『每周观察』:“在线抓娃娃”开启新娱乐窗口

华人是出了名的努力、勤奋、吃苦耐劳,我们太需要给自己新的娱乐方式了。 本周三,两场别开生面的“在线抓娃娃”的讨论不约而同的进行,技术解决方案商、产品运营、投资人纷纷加入这场讨论,...

livevideostack
2017/11/17
0
0
微信H5视频抓娃娃,没你想的那么难,看完你也会

短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构、从盈利到投资、从运营到推广,全方位解读都有了。唯独H5抓娃娃(特指移动web、微信抓娃娃),仍然很神秘。...

Agora
2017/11/29
0
0
LiveVideoStack Meet成都 生活与技术的“矛盾体”(内附资料下载)

在经历直播元年之后,许多直播APP面临并购或转型,如直播与短视频和游戏或将有更多的结合。12月2日LiveVideoStack首次走进成都,与6位大咖讲师和70位小伙伴一同分享交流音视频技术在游戏和短...

vn9plgzvnps1522s82g
2017/12/05
0
0
线上抓娃娃机日进斗金,你确定它真的是个风口吗?

去年开始,在资本市场的推动下,新一轮的线下娃娃机热潮兴起,而近期,线上抓娃娃App也走红起来,在App Store输入“抓娃娃”关键字,一下子就能跳出数十个搜索结果。据《IT时报》记者采访获悉...

张书乐
2017/12/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 Java语法教程 Java语言的跨平台特性

什么是平台 Java是可以跨平台的编程语言,那么首先我们需要知道什么是平台,通常我们把CPU与操作系统的整体称为平台。 CPU大家都知道,是计算机的大脑,它既负责思维运算,又负责计算机中各种...

老码农的一亩三分地
6分钟前
0
0
http传值问题

这两天遇到一个问题 ,与一个渠道联调接口,http请求,展示ptf 的需求,服务方以一个二进制的方式返回。 当时我们在一开始开发的时候,我们按照读取文件的方式处理,本地存一个ptf 的方式 ,...

鬼才王
14分钟前
1
0
【面试】如果你这样回答“什么是线程安全”,面试官都会对你刮目相看

不是线程的安全 面试官问:“什么是线程安全”,如果你不能很好的回答,那就请往下看吧。 论语中有句话叫“学而优则仕”,相信很多人都觉得是“学习好了可以做官”。然而,这样理解却是错的。...

中关村的老男孩
15分钟前
4
0
5.01- Druid数据源配置

1、配置项 配置 缺省值 说明 name 无 配置这个属性的意义在于,如果存在多个数据源,监控的时候 可以通过名字来区分开来。如果没有配置,将会生成一个名字, 格式是:"DataSource-" + Syste...

静以修身2025
19分钟前
0
0
itop4412开发板-Linux内核的编译

本篇文章基于itop4412开发板 5.3.2.1源码目录 Linux 内核源码在光盘“06_源码_uboot 和 kernel”目录下,如下图所示。 5.3.2.2 编译器 内核的编译器和 uboot 的编译器一样,参考“5.3.1.2 编...

书白
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部