页面1显示全屏，页面2和3不见了-慕课网

页面1显示全屏，页面2和3不见了

来源：3-1 布局的自适应动态调整

刘颜

2016-12-30 14:56

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>七夕言情</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/pageA.css">
<script type="text/javascript" src="js/Swipe.js"></script>
<script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>
</head>
<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_bottom"></div>
    </div>
   </li>
   
   <li>页面2</li>
   
   <li>页面3</li>
  </ul>

  //获取数据
  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();

  //修正小男孩的正确位置
  //路的中间位置减去小孩的高度，25是一个修正值
  $boy.css({
   top: pathY-boyHeight+25
  })
</script>
</body>
</html>

main.css

/*body*/
#content{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
.content-wrap{
position: relative;
}
.content-wrap>li{
float: left;
overflow: hidden;
position: relative;
}
.character{
width: 151px;
height: 291px;
background: url(http://img.mukewang.com/55ade248000198ae10550582.png) 0px -291px no-repeat;
position: absolute;
/*设置一个坐标元素*/
left: 6%;
top: 55%;
}

pageA.css

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

Swipe.js

///////////
//页面滑动///
/////////
/**
* [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;
}

写回答关注