Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с хейдером!!! (https://javascript.ru/forum/dom-window/23554-pomogite-s-khejjderom.html)

Wolf Life 27.11.2011 20:48

Помогите с хейдером!!!
 
Вложений: 1
Помогите полному чайнику плс!!!:help:
https://forum.jquery.com/viewImage.d...37000000003003
Надо чтоби на клик бо белому блоку он пересунулса в лево на 200-300пикселей при втором клике назад. как ето сделать?

Wolf Life 29.11.2011 00:13

НАшел но чето нероботает в чом проблема?
 
<!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>
<style type="text/css">
.blockBlue {
	width:1000px;
	height:100px;
	background:url(1.png);
	
	

	
}
.whiteDiv {
	height: 100px;
	background-image: url(2.png);
	background-repeat: no-repeat;
	
}
</style>

 
</head>

<body>

<div class="blockBlue" ><div class="whiteDiv" id="go" >111111111111111111111111</div></div>

<script>
$("#whiteDiv").toggle(function() {
            $(this).stop(true, true).animate({left: "-=100"});
      }, function() {
            $(this).stop(true, true).animate({left: "-=100"});

      }, function() {
            $(this).stop(true, true).animate({left: "+=200"});

      });

</script>



</body>
</html>

ksa 29.11.2011 09:08

Цитата:

Сообщение от Wolf Life
но чето нероботает в чом проблема?

Возможно поможет

.whiteDiv {
*!*
	position: relative;
*/!*
	height: 100px;
	background-image: url(2.png);
	background-repeat: no-repeat;
}


Но сам код я не проверял...

Wolf Life 29.11.2011 19:22

Спс....Нероботает((

Как зделать чтоби оно так двигалось но щелчком на белий блок он двигаетса влево повторнии назад на свое место?

<html>
<head>
<title>Image Mover</title>
<style>
DIV.movable {
	position:absolute;
	position: relative;
	height: 100px;
	width:300px;
	background-repeat: no-repeat;
	float:right;
	background-color: #CCC;
	}
.blockBlue {
	width:1000px;
	height:100px;
	background-color: #06F;	
	

	
}

</style>
<script language="javascript">
var x = 0; //Starting Location - left
var y = 0; //Starting Location - top
var dest_x = 300;  //Ending Location - left
var dest_y = 300;  //Ending Location - top
var interval = 10; //Move 10px every initialization

function moveImage() {
	//Keep on moving the image till the target is achieved
	if(x<dest_x) x = x + interval; 
	
	
	//Move the image to the new location
	document.getElementById("ufo").style.top  = y+'px';
	document.getElementById("ufo").style.left = -x+'px';

	if ((x+interval < dest_x) && (y+interval < dest_y)) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		window.setTimeout('moveImage()',100);
	}
}
</script>
</head>
<body onLoad="moveImage()">
<div class="blockBlue"><div id="ufo" class="movable">

</div></div>

</body>
</html>

dmitriymar 29.11.2011 22:29

Цитата:

Сообщение от Wolf Life
06 position:absolute;
07 position: relative;

может с начала основы css выучить? а?

Wolf Life 04.12.2011 15:45

Все решил проблему))) https://forum.jquery.com/topic/need-help-heder-slide


Часовой пояс GMT +3, время: 12:31.