补充内容雪碧图的自适应缩放，H5+JS+CSS3实现七夕言情教程-慕课网

index.html Swipe.js style.css pageA.css

<!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.js"></script>
    <script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
.charector {
    width: 151px;
    height: 291px;
    left: 6%;
    top: 55%;
    position: absolute;
    background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
}
</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>
    <script type="text/javascript">
        var swipe = Swipe($("#content"));
 
        var $boy = $("#boy");
 
        // 设置一下缩放比例与基点位置
        var proportion =  $(document).width() / 1440;
        // 设置元素缩放
        $boy.css({
            transform: 'scale(' + proportion + ')'
        });
 
        // 获取数据
        var getValue = function(className) {
            var $elem = $('' + className + '');
            // 走路的路线坐标
            return {
                height: $elem.height(),
                top: $elem.position().top
            };
        }
 
        // 路的中间到顶部的距离
        var pathY = function() {
            var data = getValue('.a_background_middle');
            return data.top + data.height / 2;
        }();
 
        // 获取人物元素布局尺寸
        var boyHeight = $boy.height();
        var boyWidth = $boy.width();
        // 计算下缩放后的元素与实际尺寸的一个距离
        var boyInsideLeft = (boyWidth - (boyWidth*proportion))/2;
        var boyInsideTop = (boyHeight - (boyHeight*proportion))/2;
 
        // 修正小男孩的正确位置
        // 中间路的垂直距离 - 人物原始的垂直距离 - 人物缩放后的垂直距离
        $boy.css({
            top: pathY - (boyHeight * proportion) - boyInsideTop
        });
    </script>
</body>
 
</html>

/////////
//页面滑动 //
/////////
 
 
/**
 * [Swipe description]
 * @param {[type]} container [页面容器节点]
 * @param {[type]} options   [参数]
 */
function Swipe(container) {
    // 获取第一个子节点
    var element = container.find(":first");
    var swipe = {};
 
    // li页面数量
    var slides = element.find(">"); 
 
    // 获取容器尺寸
    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;
}

* {
        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%;
    }

/*背景图*/
 
.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%;
}

补充内容雪碧图的自适应缩放

任务