Скроллинг div'a

lank · February 4, 2008

Добрыого времени суток.

Подскажите, как реализовать подобную вещь:

имеется контейнер, в который вложен большой див. У контейнера overflow:hidden; необходимо реалисовать прокрутку вложенного дива на 300px при клике на ссылки [Сюда] [Туда] (влево и вправо, соответственно).

Вот пример html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
#outer{ width:300px; height:100px; border:1px solid #ccc; overflow:hidden;  }
#inner{ width:910px; height:100px;}
#inner div{ width:300px; height:100px; float:left;}
</style>
</head>
<body>
<div id="outer">
  <div id="inner">
	<div style="background:red">1</div>
	<div style="background:gold">2</div>
	<div style="background:green">3</div>
  </div>
</div>
<a href="#">Сюда</a> <a href="#">Туда</a>
</body>
</html>

upd:

теоретически как-то так в css:

#outer{ width:300px; height:100px; border:1px solid #ccc; overflow:hidden;
position:relative;	}
#inner{ width:910px; height:100px;
position:absolute; top:0; left:0;}

Т.е. при клике на ссылки менять значение left у #inner (300px; -600px) и наоборот.

help with js, plz.

Заранее спасибо.

elfuvo · February 4, 2008

function changePos(pos){
document.getElementById("inner").style.left=pos;
}

...

<a href="java script:changePos(300)">left</a>
<a href="java script:changePos(600)">right</a>

changePos([цифра на сколько надо сместить])

lank · February 4, 2008

Что-то не сработало, пока пытался сделать так

<script type="text/javascript">
function moveX(obj, pos){
if(document.getElementById){
var elem = document.getElementById(obj);
elem.style.left = pos + "px";
}
}

</script>

<style type="text/css">
#outer{ width:300px; height:100px; border:1px solid #ccc; overflow:hidden; position:relative;  }
#inner{ width:910px; height:100px;position:absolute; left:0; top:0;}
#inner div{ width:300px; height:100px; float:left; }
</style>
</head>
<body>
<div id="outer">
  <div id="inner">
	<div style="background:red">1</div>
	<div style="background:gold">2</div>
	<div style="background:green">3</div>
  </div>
</div>
<a href="#" onclick="moveX('inner','-300');return false">Move to left:200</a>
<a href="#" onclick="moveX('inner','300');return false">right</a>
</body>
</html>

Но, работает через пень-колоду, и хотелось бы чтобы внутренний блок не улетал за пределв, те хотелось бы просто три/четыре странички, которые можно скроллить, в идеале бы хорошо это зациклить, нго без inner html.

Sign In

Скроллинг div'a

Question

lank

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

elfuvo

Link to comment

Share on other sites

lank

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information