                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3實現(xiàn)七夕言情

頁面1顯示全屏，頁面2和3不見了

<!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://img1.sycdn.imooc.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>

??<div id="boy" class="character"></div>
?</div>

?<script type="text/javascript">
??var swipe=Swipe($("#content"));

??//獲取數(shù)據(jù)
??var getValue=function(className){
???var $elem=$(''+className+'');
???//走路的路線坐標(biāo)
???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://img1.sycdn.imooc.com//55ade248000198ae10550582.png) 0px -291px no-repeat;
?position: absolute;
?/*設(shè)置一個坐標(biāo)元素*/
?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://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_bottom{
?width: 100%;
??? height: 15.3%;
??? background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
??? background-size: 100% 100%;
}

Swipe.js

///////////
//頁面滑動///
/////////
/**
* [Swipe description]
* @param {[type]} container [頁面容器節(jié)點]
* @param {[type]} options?? [參數(shù)]
*/
function Swipe(container){
??? // 獲取第一個子節(jié)點
??? var element = container.find(":first");

??? //滑動對象
??? var swipe={};

??? // li頁面數(shù)量
??? var slides = element.find("li");

??? // 獲取容器尺寸
??? var width = container.width();
??? var height = container.height();

??? // 設(shè)置li頁面總寬度
??? element.css({
??????? width? : (slides.length * width) + 'px',
??????? height : height + 'px'
??? });

??? // 設(shè)置每一個頁面li的寬度
??? $.each(slides, function(index) {
??????? var slide = slides.eq(index); //獲取到每一個li元素???
??????? //
??????? slide.css({
??????????? width: width+'px',
??????????? height: height+ 'px'
??????? });
??? });

??? //監(jiān)控完成與移動
??? swipe.scrollTo=function(x,speed){
??????? //執(zhí)行動畫移動
??????? element.css({
??????????? 'transition-timing-function' : 'linear',
??????????? 'transition-duration'??????? : speed + 'ms',
??????????? 'transform'????????????????? : 'translate3d(-'+x+'px,0px,0px)'
??????? });
??????? return this;
??? };
??? return swipe;
}