Nano Hash - криптовалюты, майнинг, программирование

Jquery mobile: невозможно анимировать фон страницы

Привет, я внедряю мобильное приложение jquery, я хочу, чтобы фон первой страницы анимировался так, как это в ссылка

я не могу реализовать это на моей странице 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>

Ниже приведен код г-на Мурата Акдениза.

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

Любая помощь приветствуется.

javascript jquery jquery-mobile
04.03.2014

Ответы:


1

Это в значительной степени работает как есть.

Вот ДЕМО

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");
}
04.03.2014
  • привет, спасибо .. я хочу, чтобы изображение двигалось слева направо после достижения конца справа, я имею в виду перемещение изображения вперед и назад .. не могли бы вы сообщить мне, как это реализовать 04.03.2014
  • @teekib, посмотри мой обновленный ответ и демонстрацию. Простое изменение — jsfiddle.net/ezanker/5P8fX/3. 04.03.2014
  • привет, я вижу, что itz работает на тебя в твоей демонстрации, но мой экран совсем не двигается 04.03.2014
  • эй, это работает ... большое спасибо ... один небольшой вопрос, каким должен быть размер изображения, сейчас я использую 1024x685, но изображение разбивается, поэтому насколько большим должно быть изображение. 04.03.2014
  • Что вы имеете в виду под разделением? Я думаю, размер будет зависеть от того, какой размер экрана вы поддерживаете. Вы также можете поиграть с headerWidth. Сделайте его больше, чтобы было меньше анимации, например. 900, как в этом примере: jsfiddle.net/ezanker/5P8fX/4 04.03.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..