jquery horizontal slide with dynamic content
I want to build a horizontal row of images that can been scrolled to using a fixed nav and jQuery, with a contact area at the far right (end) of the images. I have it nearly there, the problem is, the images are being dynamically brought in. So I don't know how wide it will be until runtime. In the code below the div sideways controls the width and Ive set it to 1000% just for testing purposes. I want to be ab开发者_如何学编程le to work out the width of all the content and then set sideways to be that amount.
Here's a demo of the below code: 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;
}
You can wait for all of the images to load, and then record the width once they do:
var loaded = 0;
var paneWidth = 0;
$('.images img').load(function() {
loaded++;
if (loaded == $('img').length) {
paneWidth = $('.images').width();
}
});
加载中,请稍侯......
精彩评论