css, jquery: фоновая картинка

Question

css, jquery: фоновая картинка

Большое изображение (название изображения: image.jpg ) будет использоваться в качестве фона div .

Часть изображения (предположим, 70%) будет видна, а затем изображение будет двигаться медленно вправо. После того как полная оставшаяся часть станет видимой, она начнет двигаться влево.

Как достичь этого с помощью кросс-браузера?

Код разметки:

<div class="my_div"></div>

2

добавлено 28 Декабрь 2012 в 12:55 автор Istiaque Ahmed отредактировано 28 Декабрь 2012 в 01:59

Просмотры: 3

источник

nl ja de

Я просто не могу понять.

добавлено 28 Декабрь 2012 в 12:59, автор Istiaque Ahmed, источник

@ GabyakaG.Petrioli, позвольте мне посмотреть

добавлено 28 Декабрь 2012 в 01:12, автор Istiaque Ahmed, источник

@Vucko, делает ли это любую анимацию фонового изображения?

добавлено 28 Декабрь 2012 в 01:16, автор Istiaque Ahmed, источник

@ GabyakaG.Petrioli, кстати, что означает OP?

добавлено 28 Декабрь 2012 в 01:24, автор Istiaque Ahmed, источник

Если вы хотите css3, см. Этот move.js .

добавлено 28 Декабрь 2012 в 01:14, автор Vucko, источник

@IstiaqueAhmed - это библиотека, которая упрощает переходы и преобразования CSS3.

добавлено 28 Декабрь 2012 в 01:29, автор Vucko, источник

@IstiaqueAhmed, проверьте .animate() метод jQuery и попробуйте для анимации свойства background-position элемента .my_div .

добавлено 28 Декабрь 2012 в 01:09, автор Gabriele Petrioli, источник

@Vucko, если OP хочет CSS3, он должен увидеть javascript-библиотеку?!?

добавлено 28 Декабрь 2012 в 01:22, автор Gabriele Petrioli, источник

OP = Оригинальный плакат (, который был бы вам в этом случае .. )

добавлено 28 Декабрь 2012 в 01:24, автор Gabriele Petrioli, источник

3 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

See this : http://jsfiddle.net/fwyJz/2/

$(function() {
   animate();
  setInterval(function() { animate();}, 7000);
});
function animate()
{
 $(".my").animate({
    backgroundPosition: "(-200px 0px)"
}, 3500, function() {
    $(this).animate({
        backgroundPosition: "0px 0px"
    }, 3500).end();
});
}

This uses a JS file : jquery.bgpos

0

добавлено 28 Декабрь 2012 в 01:56 автор Anujith

источник

предположим, что я опускаю второй метод анимации и добавляю строку backgroundPosition в функцию обратного вызова, тогда мерцание происходит, когда фоновое изображение снова позиционируется на 0,0 . Как удалить мерцание, пожалуйста? jsfiddle: jsfiddle.net/fwyJz/4

добавлено 11 Январь 2013 в 09:04, автор Istiaque Ahmed, источник

Я просто хочу, чтобы анимация была только влево. После анимации влево изображение bg должно находиться в исходном положении ( 0,0 ) без какого-либо мерцания, и последует анимация влево. Дело в том, что не нужна правильная анимация.

добавлено 11 Январь 2013 в 09:27, автор Istiaque Ahmed, источник

@IstiaqueAhmed: Да, внезапное изменение фонового положения сделает мерцание .. и почему у хотите опустить второй анимировать ..?

добавлено 11 Январь 2013 в 09:22, автор Anujith, источник

Мини-курс по Angular и NgRx

16 видео-уроков

автор Eric Herlitz · Answer 1 · 2012-12-28T01:11Z

Чтобы поместить это, сделайте что-то вроде этого

.my_div{
  background: url(img/image.jpg) no-repeat top right;
  margin-top: 10px;
  margin-right: 10px;
}

To animate simply animate the margins with jquery http://api.jquery.com/animate/

$(".my_div").animate({
    marginRight: "100px"
  }, 1500 );

Я не тестировал это, но что-то вроде этого должно сделать трюк

Чтобы запустить его, создайте кнопку с ID = «кнопка» и щелкните по ней.

<input type="button" id="button" value="animate me" />

И js

$("#button").click(function(){
  $(".my_div").animate({
    marginRight: "100px"
  }, 1500 );
});

автор Zevi Sternlicht · Answer 2 · 2012-12-28T01:32Z

$("#block").animate({
    marginLeft: "100px"
}, 1500, function(){
    $(this).animate({
         marginRight: "100px"
    });
});