1
我正在設計我的投資組合，其中有一個區域與水平幻燈片，如尾波幻燈片。我的問題是，由JS生成的寬度是在px中，我需要將該寬度設置爲％才能在大多數屏幕分辨率下工作。當我嘗試改變寬度變成百分之一，但幻燈片垂直。動態寬度與百分比和響應式設計
樣本HTML：
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<!-- PROJECT 1 -->
<article class="panel" id="work1">
<figure><img src="images/works/project1.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
</article>
<!-- PROJECT 2 -->
<article class="panel" id="work2">
<figure><img src="images/works/project2.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
<figure>
<img src="images/works/project2a.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2b.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2c.png" class="workscenter" alt="Alt Text" title="Title Text"/>
</figure>
</article>
</div>
</div>
下面我用JS：
jQuery(document).ready(function($) {
// Container
var container = $('.scroll');
// Navigation
var navContainer = $('#slider .navigation');
var navLink = $('#slider .navigation li a');
// Slides
var panelsContainer = $('.scroll .scrollContainer');
var panels = $('.scroll .scrollContainer > article');
var panelWidth = panels[0].offsetWidth;
// Float all slides side by side
panels.css({
'float' : 'left',
'position' : 'relative',
'width': panelWidth,
'height': 'auto',
'opacity': 0
});
// Set the width of the first slide
container.css({
'width': panelWidth,
'height': panels[0].offsetHeight,
'overflow': 'hidden'
});
// Set the total width to allow the slide effect
panelsContainer.css({
'width': panelWidth * panels.length,
});
// Activate the first slide
navLink.eq(0).addClass('selected');
panels.eq(0).css('opacity', 1);
// Verify the links where is possible to slide
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined) {
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 1500, 'easeInOutExpo');
if($(target).parent('div').hasClass('scrollContainer')) {
$('#slider .navigation li a').removeClass('selected');
$('#slider .navigation li a[href=' + target + ']').addClass('selected');
// Actual slide
var current = $('#slider .navigation li a.selected');
// Slide to be opened
var index = current.closest('li').index();
// Dinâmica height with plus 70px at the end
container.css('height', $(target).height() + 70);
// Set the actual slide
navLink.removeClass('selected');
current.addClass('selected');
// Show the actual slide
panels.css('opacity', 1);
// Create the transition effect
$(container).scrollTo($('.scroll .scrollContainer > article').eq(index), 800);
// Hidden all others slides
setTimeout(function() {
panels.css('opacity', 0);
panels.eq(index).css('opacity', 1);
}, 800);
}
}
});
// Fix to makes right wrong projects
if(window.location.hash) {
$('a[href="' + window.location.hash + '"]:first').trigger('click');
}
})
有人知道一些方法，使我想要什麼？
謝謝你們。
http://stackoverflow.com/questions/4006588/is-it - 可以使用-jquery-to-the-width-of-one-in-percent-or-pixels –
不要在javascript中對我的低認識工作。 – Daniel