Я хотел бы иметь движущееся фоновое изображение на моей странице слева направо точно так же, как на следующем веб-сайте http://kxip.in, пожалуйста, предложите, как этого достичь.Перемещение фонового изображения в цикле слева направо
& Благодаря Regards
Используйте некоторые JS/JQuery:
function move(){
var element = $('#selector');
element .css('background-position-x', (parseInt(element.css('background-position-x') - 10));
//Check if need to reset background-position-x to origin.
}
Самый простой способ для достижения этой цели я считаю, заключается в использовании с использованием немного JavaScript. Вы можете найти JavaScript они пользователю использовать в качестве примера здесь: http://kxip.in/js/background-moving.js
// speed in milliseconds
var scrollSpeed = 70;
// set the default position
var current = 0;
// set the direction
var direction = 'h';
function bgscroll() {
// 1 pixel row at a time
current -= 1;
// move the background with backgrond-position css properties
$('div.background-image').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}
//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);
Я призываю вас, однако, не просто копировать и вставлять, так как это, скорее всего, не работает для вас.
вы можете использовать ярлык marquee в HTML5. вы можете увидеть примеры в http://www.quackit.com/html/codes/html_marquee_code.cfm.
Его легко! Просто используйте простой javascript!
Код:
<html>
<head>
<title>BackGround Slide</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
// speed in milliseconds
var scrollSpeed = 70;
// set the default position
var current = 0;
// set the direction
var direction = 'h';
function bgscroll() {
// 1 pixel row at a time
current -= 1;
// move the background with backgrond-position css properties
$('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");
}
//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);
</script>
<style type="text/css">
body {
background-image: url('http://kxip.in/images/mohalistadium.jpg');
}
</style>
</head>
<body>
</body>
</html>
Интересный вопрос со сложным решением. К счастью, stackoverflow.com здесь, чтобы помочь вам сделать свою работу!
Очевидно, что вам понадобится jQuery! Итак, возьмите некоторый jQuery, а затем вернитесь.
Назад? Отлично.
Начнем. Во-первых, добавить немного строки в код:
$(function(){
})
Итак, что же это $ магия вещи? Никогда не думай, что ты это узнаешь! Мы здесь, чтобы получить ответы, а не учиться! Но, если вы любопытный тип, откройте новую вкладку и задайте следующий вопрос на stackoverflow.com: «что это за $(function(){ })». Кто-то наполнит вас! Не забудьте пометить JQUERY!
Хорошо, мы хотим анимировать фоновое изображение. TOUGH. Конечно, есть много способов сделать это (HTML, CSS и JAVASCRIPT всегда имеют более чем один способ сделать это!), Но я предпочитаю путь JQuery. Помните, что странные долларовые знаки на вершине? Вернемся к этому!
$(function(){
setInterval(function(){
}, 500);
})
Мы просто добавили еще несколько программ! setInterval - это счетчик, который насчитывает до 500 миллисекунд, а затем запускает код внутри. Почему 500? Я не знаю, мне просто нравится magic numbers. Итак, у нас есть таймер, и нам нужны еще несколько программ. Как добавить фон?
$(function(){
setInterval(function(){
$('body').css('background-position', '0 0');
}, 500);
})
Хорошо, теперь мы куда-то попадаем! Наши jQueries фактически устанавливают положение фона на 0, 0. Не так интересно. Давайте посмотрим, сможем ли мы сделать еще кое-что.
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$('body').css('background-position', '0 ' + x + 'px');
}, 500);
})
Давайте проверим его!
О человек. Этот образ слишком велик, и глупый котенок идет вверх! Вернуться к кодам.
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$('body').css('background-position', x + 'px 0');
}, 500);
})
Ааа, больше нравится! Но, человек ... это ужасно медленно. Давайте это обновим!
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$('body').css('background-position', x + 'px 0');
}, 10);
})
ОН SNAPPPPPP. Теперь у нас есть прокрутка котенца! JavaQuery УДИВИТЕЛЬНО!
Если честно, это фоновое изображение не делает правосудие. Время обновить это!
Ах да, теперь мы ногами !!!
ТАК, у вас оно есть! 1 из многих, МНОГО способов сделать то, что вы хотите сделать.
УДАЧА. ПОВЕСЕЛИСЬ.
Лучший ответ StackOverflow, который я когда-либо видел. Браво! – APAD1
Любые особые причины не использовать событие кадра анимации запроса. Когда дело доходит до анимации, это намного лучше, чем интервал и тайм-аут. Отличная анимационная среда GreenSock, стоит взглянуть на нее. – Rodrigo
OP, вы рок-звезда. – tnw
Вот CSS решение:
body {
background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
-webkit-animation: loader 16s steps(100) infinite;
-moz-animation: loader 16s steps(100) infinite;
-ms-animation: loader 16s steps(100) infinite;
-o-animation: loader 16s steps(100) infinite;
animation: loader 16s steps(100) infinite;
}
@-webkit-keyframes loader {
from {
background-position: 0;
}
to {
background-position: -1600px 0;
}
}
@-moz-keyframes loader {
from {
background-position: 0;
}
to {
background-position: -1600px 0;
}
}
@-ms-keyframes loader {
from {
background-position: 0;
}
to {
background-position: -1600px 0;
}
}
@-o-keyframes loader {
from {
background-position: 0;
}
to {
background-position: -1600px 0;
}
}
@keyframes loader {
from {
background-position: 0;
}
to {
background-position: -1600px 0;
}
}
Как у css-решения нет возможности увеличить число оборотов? Кстати, изображение в вашем примере исчезло. – Mark
мое предложение изучить CSS, HTML и JavaScript. –
Хит 'F12' и начать изучать этот сайт. – pawel