使用jQuery配合CSS实现火柴人闯关小程序

最新推荐文章于 2023-02-13 20:42:29 发布

老明宇.

最新推荐文章于 2023-02-13 20:42:29 发布

阅读量881

点赞数 2

分类专栏： JS与JQ饭店文章标签： jQuery动画

本文链接：https://blog.csdn.net/qq_44860582/article/details/103596378

版权

JS与JQ饭店专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用jQuery实现的火柴人闯关特效，长按按钮进行蓄力呦！用最简单的代码做最多的事（话不多说上代码）

为了方便观看，老明宇把代码写到了一块。图片的话老明宇就不再提供其实一共也就两张（请大家百度把）

效果展示：（长按按钮可以进行上下蓄力呦）

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>火柴人过关</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .sss{
            width:100%;
            height:700px;
            background:aqua;
            position:relative;
        }
        .btn-box{
            width:600px;
            height:100px;
            /* background:red; */
            margin:0 auto;
        }
        .btn-main{
            font-size:30px;
            font-weight:bold;
        }
        .btnClick{
            background:url(../img/按钮.png) 0 -2px;
            background-size:100px 50px;
            background-repeat:no-repeat;
            width:100px;
            height:50px;
            /* border:none; */
        }
        .container{
            width:100%;
            height:550px;
            background:green;
            position:relative;
            margin-top:50px;
        }
        /* 柱子 */
        .stick{
            position:absolute;
            bottom:200px;
            left:80px;
            height:5px;
            width:0;
            background:#096;
            /* 逆时针旋转90度 */
            transform:rotate(-90deg); 
            -ms-transform:rotate(-90deg);/*IE9*/
            -moz-transform:rotate(-90deg);/*Firefox*/
            -webkit-transform:rotate(-90deg);/*Ssfari and Chrome*/
            -o-transform:rotate(-90deg);/*Opera*/

            /* 设置旋转元素的基点位置 */
            transform-origin:0 100%; 
            -ms-transform-origin:0 100%;/*IE9*/
            -moz-transform-origin:0 100%;/*Firefox*/
            -webkit-transform-origin:0 100%;/*Ssfari and Chrome*/
            -o-transform-origin:0 100%;/*Opera*/

            /* 以0.35s的速度线性增长 */
            transition:transform 0.35s linear; 
            -ms-transition:transform 0.35s linear;/*IE9*/
            -moz-transition:transform 0.35s linear;/*Firefox*/
            -webkit-transition:transform 0.35s linear;/*Ssfari and Chrome*/
            -o-transition:transform 0.35s linear;/*Opera*/
        }
        .stickDown{/* 柱子倒下 */
            /* 旋转 */
            transform:rotate(0deg); 
            -ms-transform:rotate(0deg);/*IE9*/
            -moz-transform:rotate(0deg);/*Firefox*/
            -webkit-transform:rotate(0deg);/*Ssfari and Chrome*/
            -o-transform:rotate(0deg);/*Opera*/
        }
        /* 人 */
        .man{
            position:absolute;
            bottom:200px;
            z-index:2;
        }
        .man>img{
            width:60px;
        }
        /* 台阶 */
        .well-box{
            width:100%;
            height:200px;
            /* background:hotpink; */
            position:absolute;
            bottom:0;
        }
        .well{
            float:left;
            width:80px;
            height:180px;
            background:#000;
            color:#fff;
            padding-top:20px;
        }
        .well>p{
            width:15px;
            margin:0 auto;
        }
        /* 数值 */
        .sum{
            position:absolute;
            top:150px;
            left:0;
            right:0;
            width:200px;
            border:3px solid #000;
            margin:5px auto;
        }
        .sum01{
            /* width:300px; */
            transform:translateX(300px);
            transition:0.5s;
        }
    </style>
</head>
<body>
    <div class="sss">
        <div class="btn-box">
            <p class="btn-main">
                你只有非常努力，才能看起来毫不费力！<br/>
                <button class="btnClick"></button>
            </p>
        </div>
        <div class="container">
            <!-- 增长柱子 -->
            <div class="stick"></div>
            <!-- 火柴人 -->
            <div class="man"><img src="../img/小人.png"/></div>
            <!-- 台阶 -->
            <div class="well-box">
                <div class="well"><p>第一根柱子</p></div>
                <div class="well" style="margin-left:300px;"><p>第二根柱子</p></div>
            </div>
        </div>
        <!-- 记录数值 -->
        <h1 class="sum">数值：</h1>
    </div>
    <script src="../JQpackage/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            let stop = true;//柱子是否停止在增长
            let timer;//定时器
            let index = 1;
            let i = 0;

            //按下按钮，柱子增长
            $(".btnClick").mousedown(function(){
                if(stop){
                    timer = setInterval(run,0);
                }
            });
            function run(){
                if (index == 1) {
                    i++;
                }
                if (index == -1) {
                    i--;
                }
                if (i == 350) {
                    index = -1;
                }
                if (i == 0) {
                    index = 1;
                }
                $(".stick").css({"width":i+"px"});
                $(".sum").html("数值："+$(".stick").width());
            }

            //松开按钮，柱子停止增长并倒下
            $(".btnClick").mouseup(function(){
                if(stop){
                    $(".stick").stop();//柱子停止增长，stop()停止动画
                    stop = false;
                    clearInterval(timer);
                    $(".stick").addClass("stickDown");//柱子倒下
                    moveMan();//小人往前走
                }
            });

            //小人往前走
            function moveMan(){
                var stickW = $(".stick").width();//获取柱子倒下时的长度
                alert(stickW);
                setTimeout(function(){
                    $(".man").find("img").attr("src","../img/timg.gif");
                    $(".man").animate({"left":stickW+"px"},1000,function(){
                        var wellL = $(".well").eq(1).offset().left;//柱子距离屏幕左侧的距离
                        var well0 = $(".well").eq(0).offset().left;//柱子距离屏幕左侧的距离
                        var colWidth = $(".well").eq(0).width();
                        var range = wellL-well0-colWidth;//获取两个柱子中间的距离
                        if((stickW < range) || (stickW >wellL)){//判断人物是否落下
                            $(".man").animate({"bottom":"0px"});
                        }else{//如果成功，人物变为初始
                            $(".man").find("img").attr("src","../img/小人.png").hide();
                            $(".man").css({"left":0});
                            $(".stick").removeClass("stickDown").width(0);//棍子变为初始
                            var oldL = $(".well-box").offset().left;
                            $(".well-box").animate({"left":-wellL+oldL},1000,function(){//柱子移动
                                $(".man").find("img").show();
                                stop = false;//按钮不可以点击
                                clearInterval(timer);
                            });
                        }
                    });
                },600);
            }
        });
    </script>
</body>
</html>

希望看到代码人都有所收获，感谢大家！

老明宇.

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
使用jQuery配合CSS实现火柴人闯关小程序

使用jQuery实现的火柴人闯关特效，长按按钮进行蓄力呦！用最简单的代码做最多的事（话不多说上代码）为了方便观看，老明宇把代码写到了一块。图片的话老明宇就不再提供其实一共也就两张（请大家百度把）效果展示：（长按按钮可以进行上下蓄力呦）代码展示：<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录