1
編輯 重新寫這個帖子裏面，因爲我已經作出了一些代碼的改進和包裹着我解決這個問題的大腦......這滑塊意思是但是在調整活動元件的尺寸的過程中滑動元件不對準。反應靈敏，流體，jQuery的滑塊調整大小有對齊問題
要看到問題：
- 選擇2號菜單項
- 等待滑塊移動到第二現場
- 調整屏幕。你會注意到第二個和第三個場景都是可見的！
我似乎無法弄清楚如何通過調整大小的像素數來移動餘量。我即將開始尋找調整大小（窗口）。在&之前調整大小（窗口）.after！也許有更好的辦法...請讓我知道。
謝謝。
HTML：
<div id='main'>
<div id="introAnime">
<div class='sliderNav prevNext'>
<button data-dir='prev' class='left'><span><</span></button>
<button data-dir='next' class='right'><span>></span></button>
</div>
<div class='sliderNav sceneBtns'>
<button data-dir='1'>1</button>
<button data-dir='2'>2</button>
<button data-dir='3'>3</button>
</div>
<div class="sliderContent">
<ul>
<li class="">1<div class="showScene"></div></li>
<li class="">2<div class="showScene"></div></li>
<li class="">3<div class="showScene"></div></li>
</ul>
</div>
</div>
</div>
JS：
$(window).resize(function() {
grabVars();
$('.showScene').css({
'width' : contWidth + 'px'
});
naviSetup();
});
$(document).ready(function(){
grabVars();
naviSetup();
animeSetup();
$('.sliderNav').find('button').on('click', function(){
moveTo = $(this).data('dir');
move(moveTo);
});
});
function grabVars(){
introAnimeWidth = $('#introAnime').width();
contWidth = $('.sliderContent').width();
contHeight = $('.sliderContent').height();
numScenes = $('.showScene').length;
sceneMarginLeft = $('.sliderContent ul')
.css('margin-left').replace('px','');
}
function naviSetup(){
$('.sliderNav').show();
$('.prevNext .right').css({
'left' : ((introAnimeWidth - 43) + 'px')
});
sceneBtnsLeft = (introAnimeWidth - $('.sceneBtns').width())/2;
$('.sceneBtns').css({
'left' : sceneBtnsLeft
});
}
function animeSetup(){
$('.sliderContent').css({
'overflow' : 'hidden'
});
$('.showScene').css({
'width' : contWidth + 'px',
'height' : contHeight + 'px'
});
}
function move(moveTo){
grabVars();
if (moveTo == 'next')
{
if (sceneMarginLeft <= (-1) * ((1*numScenes) - 1) * (contWidth*1))
{
moveValue = 0;
}
else
{
moveValue = sceneMarginLeft - contWidth;
}
}
else if (moveTo == 'prev')
{
if (sceneMarginLeft >= 0)
{
moveValue = (-1) * ((1*numScenes) - 1) * (contWidth*1);
}
else
{
moveValue = (1*contWidth) + (1*sceneMarginLeft);
}
}
else
{
moveValue = -((moveTo-1) * contWidth);
}
$('.sliderContent ul').animate({
'margin-left' : moveValue + 'px'
}, 'slow');
}
CSS：
#main{
width: 80%;
margin: auto;
}
#introAnime{
width: 100%;
position: relative;
height:300px;
border: 2px solid #cccccc;
margin-bottom: 5%;
margin-top: 2%;
border-radius: 20px;
box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
}
.showScene{
height: 200px;
width: 680px;
}
#introAnime ul li:nth-child(1){
background-color: #669900;
}
#introAnime ul li:nth-child(2){
background-color: blue;
}
#introAnime ul li:nth-child(3){
background-color: orange;
}
.sliderContent{
overflow: scroll;
margin: 50px;
color:#ffffff;
text-size: 3em;
}
.sliderContent ul {
width: 10000px;
height: 100%;
list-style: none;
}
.sliderContent ul li{
float:left;
list-style-type: none;
}
.sliderNav{
position: absolute;
display: none;
}
.sliderNav button{
cursor: pointer;
}
.prevNext {
top: 255px;
}
.prevNext button{
width: 40px;
height: 40px;
color: #ffffff;
font-size: 1.5em;
}
.prevNext .left{
position: absolute;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
left: 5px;
}
.prevNext .right{
position: absolute;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
left: 737px;
}
.sceneBtns{
border: 2px solid #cccccc;
padding: 5px;
border-top: 0px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 195px;
}
.sceneBtns button{
background-color: #ffffff;
border: none;
font-size: 10pt;
color: #669900;
padding-left: 10px;
padding-right: 10px;
}
.sceneBtns button:nth-child(1){
border-right: 2px solid #669900;
}
.sceneBtns button:nth-child(2){
border-right: 2px solid #669900;
}