为了账号安全,请及时绑定邮箱和手机立即绑定

没有出现效果

没有出现效果

二次路人冯 2018-10-24 17:06:31
<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title>慕课七夕主题</title>    <link rel='stylesheet' href='style.css' />    <link rel='stylesheet' href='pageA.css' />    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    <script type="text/javascript" src="Swipe.js"></script></head><style type="text/css">    .charector {        position: absolute;        left: 6%;        top: 55%;        width: 151px;        height: 291px;        background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;    }        .slowWalk {     /*规定 @keyframes 动画的名称。*/    -webkit-animation-name: person-slow;     /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/    -webkit-animation-duration: 950ms;    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/    -webkit-animation-iteration-count: infinite;    /*动画切换的方式是一帧一帧的改变*/    -webkit-animation-timing-function: steps(1, start);    -moz-animation-name: person-slow;    -moz-animation-duration: 950ms;    -moz-animation-iteration-count: infinite;    -moz-animation-timing-function: steps(1, start)        /* 普通慢走 */        @-webkit-keyframes person-slow {        0% {            background-position: -0px -291px;        }        25% {            background-position: -602px -0px;        }        50% {            background-position: -302px -291px;        }        75% {            background-position: -151px -291px;        }        100% {            background-position: -0px -291px;        }    }        @-moz-keyframes person-slow {        0% {            background-position: -0px -291px;        }        25% {            background-position: -602px -0px;        }        50% {            background-position: -302px -291px;        }        75% {            background-position: -151px -291px;        }        100% {            background-position: -0px -291px;        }    }</style><body>    <div id='content'>        <ul class='content-wrap'>            <li>                <div class="a_background">                    <div class="a_background_top"></div>                    <div class="a_background_middle"></div>                    <div class="a_background_botton"></div>                </div>            </li>            <li> 页面2 </li>            <li> 页面3 </li>        </ul>        <div id="boy" class="charector"></div>        <div class="button">            <button>点击开始动画</button>        </div>    </div>    <script type="text/javascript">    var swipe = Swipe($("#content"));    // 获取数据    var getValue = function(className) {        var $elem = $('' + className + '');            // 走路的路线坐标        return {            height: $elem.height(),            top: $elem.position().top        };    }    // 路的Y轴    var pathY = function() {        var data = getValue('.a_background_middle');        return data.top + data.height / 2;    }();    var $boy = $("#boy");    var boyHeight = $boy.height();    // 修正小男孩的正确位置    $boy.css({        top: pathY - boyHeight + 25    });        // ==========================    //     增加精灵动画    // ==========================        $('button').click(function(){        // 增加走路的CSS3关键帧规则        $boy.addClass('slowWalk');    });            </script></body></html>
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 904 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信