背景切换怎么不对啦
背景切换的时候人物就没有了,而且背景图片也没有显示出来.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<link rel='stylesheet' href='index.css' />
<link rel='stylesheet' href='pageA.css' />
<script type="text/javascript" src="swipe.js"></script>
</head>
<style type="text/css">
button{
width: 80px;
height: 50px;
}
.button{
position: absolute;
bottom:0;
}
/* 人物暂停 */
.pauseWalk {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
</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 onclick="change(1)"> 页面2 </li>
<!-- 第三副画面 -->
<li onclick="change(2)"> 页面3 </li>
<div id="boy" class="charector"></div>
<div class="button">
<button>开始</button>
<button>暂停</button>
</div>
</ul>
</div>
</body>
<script type="text/javascript">
$(function() {
// 开始
// $("button:first").click(function() {
// // 10秒钟 ，走到0.5 也就是页面中间位置
// var distX = calculateDist('x', 0.5);
// var distY = calculateDist('y', 0.5);
// walkRun(10000, distX, distY);
// });
$(function() {
var container = $("#content");
var swipe = Swipe(container);
// 页面滚动到指定的位置
function scrollTo(time, proportionX) {
var distX = container.width() * proportionX;
swipe.scrollTo(distX, time);
}
////////////////////////////////////////////////////////
//=================== 动画处理 ====================== //
////////////////////////////////////////////////////////
//////////
// 小孩走路 //
//////////
var boy = BoyWalk();
// 开始
$("button:first").click(function() {
// 开始第一次走路
boy.walkTo(2000, 0.2)
.then(function() {
// 第一次走路完成
// 开始页面滚动
scrollTo(5000, 1);
}).then(function() {
// 第二次走路
return boy.walkTo(5000, 0.5);
});
});
})
})
</script>
<script type="text/javascript" src="BoyWalk.js"></script>
</html>
/////////
//页面滑动 //
/////////
/**
* [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': '5000ms',
'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动
});
return this;
};
return swipe;
}
//change
function change(i){
//slides.eq(i).css({display:'none'})
}
