Меню
Что нового?

Смещение background-image.

Эньди

Эньди

Creater по жизни.
Задумал сделать плавающий background-image с использованием JavaScript.
Видел скрипт популярный на эту тему, но:
1. он мне не подходит.
2. он у меня почему то не работает.

А Помощь требуется следующая:
1. какими волшебными словами надо двигаеть background-image по оси X и по оси Y?

надо двигать background <body>
 
Эньди

Эньди

Creater по жизни.
Получается нечто вроде такого...
но естественно не работает...
в чём ошибка? О_о

JS
PHP: 
/*window.onload = float();*/

function step() {
	var s = Math.floor(( Math.random() )*200);	
	return s;	}
function vector() {
	var v = Math.floor(( Math.random() )*100);	
	return v;	}
function speed() {
	var sp = (Math.floor ( ( ( Math.random() ) * 10000 ) / 3 ) + 500);
	return sp;	}

function float(s,vector, speed) {
	var step = s;
	var v = vector;
	var sp = speed;
	
	if(step = 0) {
		var s = step();
		var v = vector();
		var sp = speed();	
	}
		
	if(step > 0) {
		
		step--;
		
		if ( v > 0 && 91 > v) { 
			document.getElementById("space").style.right= "-" + step + "px"; 	}
		if ( v > 89 && 181 > v) { 
			document.getElementById("space").style.bottom= "-" + step + "px"; 	}
		if ( v > 179 && 271 > v) { 
			document.getElementById("space").style.left= "-" + step + "px"; 	}
		if ( v > 269 && 361 > v) { 
			document.getElementById("space").style.top= "-" + step + "px"; 	}
			
		setTimeout(float(step,v,sp), sp);
	}

}
 
HEm

HEm

Сетевой бобер
document.getElementById("space").style.right и что ты смещаешь?
на память там надо background-position-x
 

Yaponchick

Новичок
Код: 
(function($) {
    $.fn.scrollingBackground = function(options) {
      // settings and defaults.
      var settings = options || {};
      var speed = settings.speed || 1;
      var step = settings.step || 1;
      var direction = settings.direction || 'rtl';
      var animStep;
      
      // build up a string to pass to animate:
      if (direction === 'rtl') {
        animStep = "-=" + step + "px";
      } else if (direction === 'ltr') {
        animStep = '+=' + step + "px";
      }
      
      var element = this;
      
      // perform the animation forever:
      var animate = function() {
          element.animate({
              backgroundPosition: animStep + " 0px"
          }, speed, 'linear', animate);
      };
      animate();
    };
})(jQuery);
Подарок! И да как выше упомянули, можно background-position-x юзать
 

Yaponchick

Новичок
10 минут понадобилось на дебаг...

Код: 
function advanceBackground(el, x, y) {
  var cur_x = + (el.style.backgroundPositionX || "0px").match(/-?\d+/)[0];
  var cur_y = + (el.style.backgroundPositionY || "0px").match(/-?\d+/)[0];
  
  el.style.backgroundPositionX = (cur_x + x) + "px";
  el.style.backgroundPositionY = (cur_y + y) + "px";
}

var el = document.getElementById("above_body");
advanceBackground(el, 10, 0);
И учись пользоваться Firebug / Inspect Element, уже практически все браузеры умеет показывать свойства xD
 
Эньди

Эньди

Creater по жизни.
Я не очень лажу с JS ((
с трудом даётся... но я буду стараться...
 
Эньди

Эньди

Creater по жизни.
Не знаю почему... но у меня даже самые простейшие движения не выполняются ((

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script language="javascript">
function advanceBackground(el, x, y) {
  var cur_x = + (el.style.backgroundPositionX || "0px").match(/-?\d+/)[0];
  var cur_y = + (el.style.backgroundPositionY || "0px").match(/-?\d+/)[0];
  
  el.style.backgroundPositionX = (cur_x + x) + "px";
  el.style.backgroundPositionY = "100px";
}

var el = document.getElementById("above_body");
advanceBackground(el, 10, 0);
</script>
</head>

<body >

<div id="above_body" style="width:500px; height:500px; background-image: url(img/bg/bg_main_1.png);">
<a href="#" onover="advanceBackground(above_body, 1000, 1000);">000000000000000000000000</a></div>

</body>
</html>
 

Yaponchick

Новичок
HTML: 
<div id="above_body" style="width:500px; height:500px; background-image: url(img/bg/bg_main_1.png);">
<a href="#" onclick="advanceBackground(document.getElementById("above_body"), 100, 0); return false;">Сдвинуть на 100пкс</a></div>
 
Эньди

Эньди

Creater по жизни.
HEm написал(а):
onover
Нажмите для раскрытия...
тут *облажал*, но я пробовал и с другими параметрами...

Pestilence написал(а):
HTML: 
<div id="above_body" style="width:500px; height:500px; background-image: url(img/bg/bg_main_1.png);">
<a href="#" onclick="advanceBackground(document.getElementById("above_body"), 100, 0); return false;">Сдвинуть на 100пкс</a></div>
Нажмите для раскрытия...
Ничего не происходит...
 
Эньди

Эньди

Creater по жизни.
Всем спасибо!!!

Решил проблему таким образом:
PHP: 
var step = Math.floor( ( Math.random() ) * 200 );       
var obj = document.getElementById('space');
togo = '0px +' + step + 'px';   
obj.style. backgroundPosition =  togo;
вроде как я понял в backgroundPosition должно входить string а не integer
 
Эньди

Эньди

Creater по жизни.
Не знал я этого... (

Сейчас меня пока что устраивает имеющаяся функция backgroundPosition, но в перспективе - трабл:
фон то перемещается только по оси Y (во вертикали) а вот как его заставить по оси X (горизонтально) перемещаться ?

Я так понял функции: backgroundPositionY, backgroundPositionX

Но вот что то я не догоняю как они работают (
как будто не мозила, не лиса, не Хром не видят их... (
 
Войдите или зарегистрируйтесь для ответа.
Сверху