背景切換怎么不對啦
? ?背景切換的時候人物就沒有了,而且背景圖片也沒有顯示出來.
<!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 [頁面容器節(jié)點(diǎn)]
?* @param {[type]} options ? [參數(shù)]
?*/
function Swipe(container) {
? ? ? ? // 獲取第一個子節(jié)點(diǎn)
? ? ? ? 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': '5000ms',
? ? ? ? ? ? ? ? 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //設(shè)置頁面X軸移動
? ? ? ? ? ? });
? ? ? ? ? ? return this;
? ? ? ? };
? ? ? ? ? ?
? ? return swipe;
}
? ? ? ? ? //change
function change(i){
? ? ? ? ? ? //slides.eq(i).css({display:'none'})
? ? ? ? }
2019-06-19
樓上說的對，沒有正確導(dǎo)入CSS或者js，第二個，第三個背景本身就沒有
????????????<!-- 第二副畫面 -->
? ? ? ? ? ? <li onclick="change(1)"> 頁面2 </li>
? ? ? ? ? ? <!-- 第三副畫面 -->
? ? ? ? ? ? <li onclick="change(2)"> 頁面3 </li>
2019-05-18
你沒有那兩個css