我正在设计我的作品集，其中有一个带有水平幻灯片的区域，例如 coda slide。我的问题是，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');
}
})
有人知道一些方法来制作我想要的东西吗？
感谢你们。