/////////
//页面滑动 //
/////////
 
 
/**
 * [Swipe description]
 * @param {[type]} container [页面容器节点]
 * @param {[type]} options   [参数]
 */
function Swipe(container) {
    // 获取第一个子节点
    var element = container.find(":first");
    var swipe = {};
 
    // li页面数量
    var slides = element.find("li");
 
    // 获取容器尺寸
    var width = container.width();
    var height = container.height();
 
    // 设置li页面总宽度
    element.css({
        width: (slides.length * width) + 'px',
        height: height + 'px'
    });
 
    // 设置每一个页面li的宽度
    $.each(slides, function(index) {
        var slide = slides.eq(index); // 获取到每一个li元素    
        slide.css({
            width: width + 'px',
            height: height + 'px'
        });
    });
 
    //监控完成与移动
    swipe.scrollTo = function(x, speed) {
        //执行动画移动
        element.css({
            'transition-timing-function' : 'linear',
            'transition-duration'        : speed + 'ms',
            'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
        });
        return this;
    };
 
    return swipe;
}

/**
 * 小孩走路
 * @param {[type]} container [description]
 */
function BoyWalk() {
 
    var container = $("#content");
    // 页面可视区域
    var visualWidth = container.width();
    var visualHeight = container.height();
 
    // 获取数据
    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 boyWidth = $boy.width();
    var boyHeight = $boy.height();
    // 修正小男孩的正确位置
    $boy.css({
        top: pathY - boyHeight + 25
    });
 
    // 暂停走路
    function pauseWalk() {
        $boy.addClass('pauseWalk');
    }
 
    // 恢复走路
    function restoreWalk() {
        $boy.removeClass('pauseWalk');
    }
 
    // css3的动作变化
    function slowWalk() {
        $boy.addClass('slowWalk');
    }
 
    // 用transition做运动
    function stratRun(options, runTime) {
        var dfdPlay = $.Deferred();
        // 恢复走路
        restoreWalk();
        // 运动的属性
        $boy.transition(
            options,
            runTime,
            'linear',
            function() {
                dfdPlay.resolve(); // 动画完成
            });
        return dfdPlay;
    }
 
    // 开始走路
    function walkRun(time, dist, disY) {
        time = time || 3000;
        // 脚动作
        slowWalk();
        // 开始走路
        var d1 = stratRun({
            'left': dist + 'px',
            'top': disY ? disY : undefined
        }, time);
        return d1;
    }
 
    // 计算移动距离
    function calculateDist(direction, proportion) {
        return (direction == "x" ?
            visualWidth : visualHeight) * proportion;
    }
 
    return {
        // 开始走路
        walkTo: function(time, proportionX, proportionY) {
            var distX = calculateDist('x', proportionX)
            var distY = calculateDist('y', proportionY)
            return walkRun(time, distX, distY);
        },
        // 停止走路
        stopWalk: function() {
            pauseWalk();
        },
        setColoer:function(value){
            $boy.css('background-color',value)
        }
    }
}

/*背景图*/
 
.a_background {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
.a_background_top{
    width: 100%;
    height: 71.6%;
    background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
    background-size: 100% 100%;
}
 
 
.a_background_middle{
    width: 100%;
    height: 13.1%;
    background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
    background-size: 100% 100%;
}
 
.a_background_botton{
    width: 100%;
    height: 15.3%;
    background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
    background-size: 100% 100%;
}

* {
       padding: 0;
       margin: 0;
   }
 
   ol,
   ul,
   li {
       list-style-type: none;
   }
   /*主体部分*/
 
   #content {
       width: 100%;
       height: 100%;
       /* top: 20%; */
       overflow: hidden;
       position: absolute;
   }
 
   .content-wrap {
       position: relative;
   }
 
   .content-wrap > li {
       background: #CAE1FF;
       color: red;
       float: left;
       overflow: hidden;
       position: relative;
   }
 
   li:nth-child(2) {
       background: #9BCD9B;
   }
 
   li:nth-child(3) {
       background: yellow;
   }
 
   a {
       position: absolute;
       top: 50%;
       left: 40%;
   }
 
   .charector {
       left: 0%;
       top: 55%;
       position: absolute;
       width: 100%;
       height: 100%;
       width: 151px;
       height: 291px;
       background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
   }
 
   .slowWalk {
       -webkit-animation-name: person-slow;
       -webkit-animation-duration: 950ms;
       -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;
       }
   }