jQuery Mobile的：無法動畫頁面背景

你好我實現一個jQuery Mobile的應用程序，我想在第一頁backgroungd動畫這樣的linkjQuery Mobile的：無法動畫頁面背景

我無法在我的jquerymobile頁面來實現這一點。

<div data-role="page" id="page" data-theme="b" > 
    <div data-role="header" data-position="fixed" data-theme="b"> 
     <h1>helo</h1> 
    </div> 
<!-- Start of content --> 
    <div data-role="content" id="target-content" > 


    </div> 
    <!-- end of content --> 

    <!-- start of footer --> 
     <div id="homeFooter" class="controlsFooter" data-role="footer" data-position="fixed" data-theme="b"> 

      <div style="width:100px; margin:auto;"> 
      <div class="center-wrapper" style="float:left; margin-right:10px;"> 

       <a href="#page2" data-role="button" style="margin: 0.2em; data-transition="slide" data-inline="true" data-theme="b" data-icon="check" data-mini="true">Next</a>    
      </div><!-- end of center wrap --> 
    </div> 
     </div><!-- /footer --> 

    <!-- end of footer --> 
</div>

下面是任何幫助表示讚賞Mr.Murat阿克登尼基

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <meta name="author" content="aaaaa" /> 

    <title>Moving Background</title> 
</head> 

<body> 
<style> 


     body 
       { 
        height: 100%; 
        padding: 0; 
        margin: 0; 
        background: #fff url(back2.jpg) repeat-x scroll right bottom; 
        background-color: #fff !important; 
       } 


</style> 

<script src="jquery-1.6.2.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
      var scrollSpeed = 60;  // Speed in milliseconds 
      var step = 1;    // How many pixels to move per step 
      var current = 0;   // The current pixel row 
      var imageWidth = 1024;  // Background image width 
      var headerWidth = 280;  // How wide the header is. 

      //The pixel row where to start a new loop 
      var restartPosition = -(imageWidth - headerWidth); 

      function scrollBg(){ 
       //Go to next pixel row. 
       current -= step; 

       //If at the end of the image, then go to the top. 
       if (current == restartPosition){ 
        current = 0; 
       } 

       //Set the CSS of the header. 
       $('body').css("background-position",current+"px 0"); 
      } 

      //Calls the scrolling function repeatedly 
      var init = setInterval("scrollBg()", scrollSpeed); 
    </script> 
</body> 
</html>

的代碼。

來源

2014-03-04 teekib

它幾乎可以正常工作。

這裏是一個DEMO

var scrollSpeed = 60; // Speed in milliseconds 
var step = 1; // How many pixels to move per step 
var current = 0; // The current pixel row 
var imageWidth = 1024; // Background image width 
var headerWidth = 280; // How wide the header is. 
//The pixel row where to start a new loop 
var restartPosition = -(imageWidth - headerWidth); 

function scrollBg() { 
    //Go to next pixel row. 
    current -= step; 
    //If at the end of the image, then go to the top. 
    if (current == restartPosition) { 
     current = 0; 
    } 
    //Set the CSS of the header. 
    $('body').css("background-position", current + "px 0"); 
} 

//Calls the scrolling function repeatedly 
var init; 
$(document).on("pagecreate", "#page1", function(){ 
    clearInterval(init); 
    var init = setInterval(scrollBg, scrollSpeed); 
});

在CSS中，你定身的背景和才能看到它，你需要設置JQM頁面和內容，背景透明：

body { 
    height: 100%; padding: 0; margin: 0; 
    background: #fff url(http://lorempixel.com/1024/1000) repeat-x scroll left top; 
    background-color: #fff !important; 
} 
[data-role=page], .ui-content { 
    background-color: transparent !important; 
}

更新：OP已要求圖像來回而不是一個方向。

更新DEMO

var reverse = false; 
function scrollBg() { 
    //Go to next pixel row 
    if (reverse){ 
     current += step; 
    } else { 
     current -= step; 
    } 
    //If at the end of the image, then go to the top. 
    if (current == restartPosition) { 
     reverse = true;   
    } 
    if (current == 0) { 
     reverse = false;   
    } 
    //Set the CSS of the header. 
    $('body').css("background-position", current + "px 0"); 
}

來源

2014-03-04 18:24:33 ezanker

你好，謝謝你..我希望圖像達到正確結束後左右移動，我的意思是說移動圖像來回..你可以讓我知道如何實現它 – teekib

@teekib，看到我更新的答案和演示。一個簡單的變化 - http://jsfiddle.net/ezanker/5P8fX/3/ – ezanker

嗨，我可以看到itz在你的演示中爲你工作，但我的屏幕並沒有移動 – teekib

jQuery Mobile的：無法動畫頁面背景

回答

相關問題