Question

您好我正在实现一个jquery移动应用程序，我希望第一页backgroungd在link

中像这样制作动画

我无法在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 Akdeniz

的代码

<!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>

感谢任何帮助。

Answer 1

它几乎按原样运作。

这是 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");
}

Jquery mobile：无法为页面背景设置动画

1 个答案: