Я хочу построить горизонтальный ряд изображений, который можно прокрутить с использованием фиксированной навигации и jQuery, с областью контакта в крайнем правом углу (конец) изображений.У меня это почти там, проблема в том, что изображения вводятся динамически. Поэтому я не знаю, насколько они будут широкими до времени выполнения.В приведенном ниже коде div sideways контролирует ширину, и я установил ее на 1000% только для целей тестирования.Я хочу иметь возможность определить ширину всего содержимого, а затем установить sideways на эту сумму.
Демонстрация приведенного ниже кода: http://jsfiddle.net/Blender/feyzJ/
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div class="nav">
<a href="#home">home</a>
<br>
<a href="#contact">contact</a>
</div>
<div class="sideways">
<div class="images">
<div class="image">
<img src="images/img1jpg"/>
</div>
<div class="image">
<img src="images/img2.jpg"/>
</div>
<div class="image">
<img src="images/img3.jpg"/>
</div>
<div class="image">
<img src="images/img4.jpg"/>
</div>
<div class="image">
<img src="images/if-black-could-shine.jpg"/>
</div>
</div>
<div class="contact">
CONTACT
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$('a[href=#home]').click(function()
{
$('html, body').animate({scrollLeft:0}, 'slow');
return false;
});
$('a[href=#contact]').click(function()
{
$('html, body').animate({scrollLeft:$(document).width()}, 'slow');
return false;
});
});
</script>
</body>
</html>
CSS:
body
{
background:#E8E8E6;
overflow-x: scroll;
overflow-y: auto;
}
.nav
{
position:fixed;
padding-top:200px;
padding-left:20px;
padding-right:20px;
float: left;
}
.sideways
{
padding-top:20px;
padding-left:100px;
width:1000%;
height:100%;
}
.image
{
float: left;
padding-right:20px;
}
.contact
{
float: left;
padding-right:20px;
}