Форум PHP программистов > Смещение background-image (Помогите узнать)

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Смещение background-image (Помогите узнать)

and_y87

29.02.2012 - 22:11

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

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

Спустя 8 минут, 2 секунды (29.02.2012 - 21:19) inpost написал(а):

Запихни в блок 2 дива, и нижний див двигай, оба дива position:absolute.

Спустя 8 минут, 8 секунд (29.02.2012 - 21:28) and_y87 написал(а):

Да, забыл пояснить...
надо двигать background <body>

Спустя 10 минут, 9 секунд (29.02.2012 - 21:38) inpost написал(а):

and_y87
Див сделай внутри background, чего ещё париться с этим.
Или меняй параметр http://htmlbook.ru/css/background-position , ставь цифры свои +1+1+1.

Спустя 16 минут, 24 секунды (29.02.2012 - 21:54) sergeiss написал(а):

Как по оси Х двигать - см. тут http://phpforum.ru/index.php?showtopic=58216&hl=, мои ответы.

Спустя 1 час, 21 минута, 58 секунд (29.02.2012 - 23:16) and_y87 написал(а):

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

JS


/*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);
    }

}

Спустя 23 минуты, 20 секунд (29.02.2012 - 23:39) inpost написал(а):

Посмотри логи, на каком месте вышибает ошибку.

Твой ли код?

Спустя 11 минут, 50 секунд (29.02.2012 - 23:51) and_y87 написал(а):

Код мой.

Как посмотреть где вышибает ваще незнаю. (

буду разбираться значит

P.S. со скоростью напутал (
на было:

function vector() {
    var v = ( ( Math.floor ( ( Math.random () ) * 100 ) * 4 ) - 40);    
    return v;    }

Спустя 1 минута, 27 секунд (29.02.2012 - 23:53) Winston написал(а):

Цитата (and_y87 @ 29.02.2012 - 22:51)

Как посмотреть где вышибает ваще незнаю. (

В Хроме жмешь Ctrl+Shift+J -> Console

Спустя 18 часов, 27 минут, 34 секунды (1.03.2012 - 18:20) and_y87 написал(а):

Уменьшил число строк, не повлияв сильно на функционал

<script language="javascript">
window.onload = space(0,0,0);

function space(s,vector, speed) {
	var step = s;
	var v = vector;
	var sp = speed;;
	if( step == 0 ) {
		var step = Math.floor( ( Math.random() ) * 200 );	
		var v = (Math.floor( ( ( Math.random() ) * 100 ) / 25 ) );	
		var sp = (Math.floor ( ( ( Math.random() ) * 10000 ) / 3 ) + 500);	
	}
	if( step > 0 ) {
		step--;
		if ( (v == 1) && (v == 0) ) {	document.GetElementByID("space").style.backgroundPositionX = step;	}
		if ( v == 2 ) {	document.GetElementByID("space").style.backgroundPositionY = step;	}
		if ( v == 3 ) {	document.GetElementByID("space").style.backgroundPositionX = step;	}
		if ( v == 4 ) {	document.GetElementByID("space").style.backgroundPositionY = step;	}
		setTimeout(space(step,v,sp), sp);
	}
}
</script>

Но код всёравно отказывается работать (

Спустя 1 час, 23 минуты, 59 секунд (1.03.2012 - 19:44) bodja написал(а):

У вас вообще это

Цитата

document.getElementById("space").style.right

или это

Цитата

document.GetElementByID("space").style.backgroundPositionY

работает ?

Спустя 23 часа, 48 минут, 50 секунд (2.03.2012 - 19:33) and_y87 написал(а):

страничка:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script language="javascript">
function aa()  { 
	document.getElementById("space").style.right = 300; 
	}
function bb()  { 
	document.GetElementByID("space").style.backgroundPositionY = 300;
	}
</script>
</head>

<body>
<br>
<br>
<a href="#" onclick="aa()">aa</a>
<br>
<a href="#" onclick="bb()">bb</a>
<br>
<div align="center" id="space" style="background-image:url(img/background_2_1024.png); width:300px; height:300px;">
</div>
</body>
</html>

Результат нулевой при клике по обеим ссылкам...

Спустя 2 часа, 29 минут, 28 секунд (2.03.2012 - 22:03) and_y87 написал(а):

Всем спасибо!!!

Решил проблему таким образом:

var step = Math.floor( ( Math.random() ) * 200 );       
var obj = document.getElementById('space');
togo = '0px +' + step + 'px';   
obj.style. backgroundPosition =  togo;

вроде как я понял в backgroundPosition должно входить string а не integer

Спустя 3 часа, 38 минут, 55 секунд (3.03.2012 - 01:41) bodja написал(а):

Цитата

Решил проблему таким образом:

Совершенно правильно решили.
Во всех стилях идет стринг по причине px % и т.д.
Еще добавлю ,если иногда браузер какойто стиль не принимает ,например "rotate" можно решить вопрос через obj.style.cssText

Спустя 13 часов, 6 минут, 53 секунды (3.03.2012 - 14:48) and_y87 написал(а):

Цитата

спасибо за доп. инфо!!!

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

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

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

Спустя 1 час, 53 минуты, 24 секунды (3.03.2012 - 16:42) and_y87 написал(а):

Вот что пока получается...
весёлая вышла наработочка... 50% от того чего хочется :D



	G_step 		= Math.floor( ( Math.random() ) * 200 );	
	G_vector 	= Math.floor ( (Math.random() * 100 ) );	
	G_speed 	= 500 + (Math.floor ( (Math.random() * 1000 ) ) );	
	
	window.setInterval("space()",G_speed)

function space() {
	if( G_step == 0 ) {	
		G_step 		= Math.floor( ( Math.random() ) * 200 );	
		G_vector 	= (Math.floor( ( ( Math.random() ) * 100 )) );	
		G_speed 	= (Math.floor ( ( ( Math.random() ) * 10000 ) / 3 ) + 500);	
	}

	var step 	= G_step;
	var vector	= G_vector;
	var speed 	= G_speed;
	var step = (step - 1);
	G_step = step;
	
	if ( (vector > 50)  ) {	
		var cords = '0px +' + step + 'px';
		document.getElementById('space').style.backgroundPosition = cords;
	}
	if ( vector < 51) {	
		var cords = '0px -' + step + 'px';
		document.getElementById('space').style.backgroundPosition = cords;
	}
}

Спустя 2 часа, 8 минут, 27 секунд (3.03.2012 - 18:50) bodja написал(а):

Цитата

фон то перемещается только по оси Y (во вертикали) а вот как его заставить по оси X (горизонтально) перемещаться ?

var x=10;
var y=20;
obj.style. backgroundPosition=x+'px '+y+'px';

Спустя 58 минут, 54 секунды (3.03.2012 - 19:49) and_y87 написал(а):

50% готово


        G_step          = Math.floor( ( Math.random() ) * 200 );        
        G_vector        = Math.floor ( (Math.random() * 100 ) );        
        G_speed         = Math.floor ( (Math.random() * 100 ) )*2;      
        x = 0;
        window.setInterval("space()",G_speed)
 
function space() {
        if( x == G_step ) {     
                G_step          = Math.floor( ( Math.random() ) * 200 );        
                G_vector        = Math.floor( ( ( Math.random() ) * 100 ));     
                G_speed         = Math.floor ( (Math.random() * 100 ) )*2;      
        }
 
        var vector      = G_vector;
        var speed       = G_speed;
        x++;
        var cords = '0px +' + x + 'px';
        if ( (vector > 50)  ) { 
                document.getElementById('space').style.backgroundPosition = cords;
        }
        if ( vector < 51) {     
                document.getElementById('space').style.backgroundPosition = cords;
        }
}

можно вставить в <body onmousemone="space();"> и получится движение фона при движении мыши (выглядит эффектно)

Спустя 20 часов, 10 минут, 57 секунд (4.03.2012 - 16:00) and_y87 написал(а):

Цитата (bodja @ 3.03.2012 - 15:50)

Цитата

var x=10;
var y=20;
obj.style. backgroundPosition=x+'px '+y+'px';

Спасибоще! Я понял теперь что как было...

Получил на выходе то что хотел:


<body>
<div  id="space" onmousemove="space();" style="background-image: url(img/bg/bg_main.png);">
</div>
</body>
</html>


	G_step 		= Math.floor( ( Math.random() ) * 200 );	
	G_vector 	= Math.floor( ( ( Math.random() ) * 100) / 20 );
	G_speed 	= Math.floor( (Math.random() * 300 ) ) * 2;	
	step = G_step;
	x = 0;
	y = 0;
	window.setInterval("space()",G_speed)
function space() {
	if( step < 0 ) {	
		G_step 		= Math.floor( ( Math.random() ) * 200 );	
		G_vector 	= Math.floor( (( Math.random() ) * 100) / 20 );
		G_speed 	= Math.floor( (Math.random() * 100 ) ) * 2;
		step = G_step;
	}
	var vector	= G_vector;
	step--;
	if (vector == 1 ) {		x++;	}
	if (vector == 2 ) {		y++;	}
	if (vector == 3 ) {		x--;	}
	if (vector == 4 ) {		y--;	}
	document.getElementById('space').style.backgroundPosition=x+'px '+y+'px';
}

Вставив нечто подобное, получается очень здорово.

Фон сам двигается (перемещается горизонтально и вертикально), к тому же при движении мыши фон движется тоже немного ускоряясь движется.

_____________
Стараюсь сделать New Galaxy Expedition.

Быстрый ответ:

Здесь расположена полная версия этой страницы.