Coda滑塊和滾動按鈕

SO，Coda滑塊和滾動按鈕

我正在創建基於Coda Slider的垂直滑塊。儘管我對Jquery的知識非常有限，但我已經設法使滑塊完全沒有設置，但有一個重要的問題：動畫之前和之後（由「左」和「右」控制，或者在這種情況下，「向上」和「向下」，與我已經添加的「向上」和「向下」DIV沒有關聯。我很喜歡點擊「向上」div使滑塊滾到上一張幻燈片。

我還是用腳本修修補補，但我有一個給我的缺乏與jQuery經驗的感覺，我可能會在SO擺佈推測這一個。

任何想法非常感謝！

我的javascript滑塊：

$(document).ready(function() { 

var $panels = $('#slider .scrollContainer > div'); 
var $container = $('#slider .scrollContainer'); 

// if false, we'll float all the panels left and fix the width 
// of the container 
var horizontal = false; 

// float the panels left if we're going horizontal 
if (horizontal) { 
    $panels.css({ 
     'float' : 'left', 
     'position' : 'relative' // IE fix to ensure overflow is hidden 
    }); 

    // calculate a new width for the container (so it holds all panels) 
    $container.css('width', $panels[0].offsetWidth * $panels.length); 
} 

// collect the scroll object, at the same time apply the hidden overflow 
// to remove the default scrollbars that will appear 
var $scroll = $('#slider .scroll').css('overflow', 'hidden'); 

// apply our left + right buttons 
$scroll 
    .before('<div id="uptopdiv" />') 
    .after('<img class="scrollButtons right" src="images/scroll_right.png" />'); 

// handle nav selection 
function selectNav() { 
    $(this) 
     .parents('ul:first') 
      .find('a') 
       .removeClass('selected') 
      .end() 
     .end() 
     .addClass('selected'); 
} 

$('#slider .navigation').find('a').click(selectNav); 

// go find the navigation link that has this target and select the nav 
function trigger(data) { 
    var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); 
    selectNav.call(el); 
} 

if (window.location.hash) { 
    trigger({ id : window.location.hash.substr(1) }); 
} else { 
    $('ul.navigation a:first').click(); 
} 

// offset is used to move to *exactly* the right place, since I'm using 
// padding on my example, I need to subtract the amount of padding to 
// the offset. Try removing this to get a good idea of the effect 
var offset = parseInt((horizontal ? 
    $container.css('paddingTop') : 
    $container.css('paddingLeft')) 
    || 0) * -1; 


var scrollOptions = { 
    target: $scroll, // the element that has the overflow 

    // can be a selector which will be relative to the target 
    items: $panels, 

    navigation: '.navigation a', 

    // selectors are NOT relative to document, i.e. make sure they're unique 
    prev: 'img.left', 
    next: 'img.right', 

    // allow the scroll effect to run both directions 
    axis: 'xy', 

    onAfter: trigger, // our final callback 

    offset: offset, 

    // duration of the sliding effect 
    duration: 500, 

    // easing - can be used with the easing plugin: 
    // http://gsgd.co.uk/sandbox/jquery/easing/ 
    easing: 'swing' 
}; 

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation. 
$('#slider').serialScroll(scrollOptions); 

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect 
$.localScroll(scrollOptions); 

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the 
// very first page load. We don't always need this, but it ensures 
// the positioning is absolutely spot on when the pages loads. 
scrollOptions.duration = 1; 
$.localScroll.hash(scrollOptions); 

});

我的HTML：

<script src="http://www.marcatectura.com/wp-content/jquery-1.2.6.js" type="text/javascript"></script> 
<script src="http://www.marcatectura.com/wp-content/jquery.scrollTo-1.3.3.js" type="text/javascript"></script> 
<script src="http://www.marcatectura.com/wp-content/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://www.marcatectura.com/wp-content/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script> 
<body> 
<div id="wrapper">  
    <div id="intro"> 
     This area can house any content within the wrapper prior to the actual slider, but is best left empty for the Adrienne Adams feature. 
    </div> 
    <div class="scrollButtons left"></div> 
    <div id="upbuttoncontainer"><div id="uptopdiv"><div id="uptoparrow-border-left"></div><div id="uptoparrow-border-right"></div><div id="uptoparrow-up-internal"></div><div id="uptoparrow-up"></div></div><div id="upbottomdiv"><div id="uparrow-border-left"></div><div id="uparrow-border-right"></div><div id="uparrow-up-internal"></div><div id="uparrow-up"></div></div></div> 
    <div id="slider">  
     <div class="scroll"> 
      <div class="scrollContainer"> 
       <div class="panel" id="wib1">wib1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<a href="#editor">Editor</a>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
      <div class="panel" id="files"><h2>Files</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
      <div class="panel" id="editor"><h2>Editor</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad <a href="#books">books</a> minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
      <div class="panel" id="preview"><h2>Preview</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
      <div class="panel" id="css"><h2>CSS</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
      <div class="panel" id="terminal"><h2>Terminal</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#sites">And some sites</a></p></div> 
      <div class="panel" id="books"><h2>Books</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
      </div> 
     </div> 
     <div id="shade"></div> 
    </div> 
<div id="downbuttoncontainer"><div id="downtopdiv"><div id="downtoparrow-border-left"></div><div id="downtoparrow-border-right"></div><div id="downtoparrow-up-internal"></div><div id="downtoparrow-up"></div></div><div id="downbottomdiv"><div id="downarrow-border-left"></div><div id="downarrow-border-right"></div><div id="downarrow-up-internal"></div><div id="downarrow-up"></div></div></div> 
    <p>AFTER slider text:<a href="#books">books</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#wib1">sites</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <a href="#terminal">terminal</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div>

-Marcatectura

來源

2012-10-25 Marcatectura

既然SO不會讓我發佈一個鏈接到JsFiddle的問題，這裏是：http://jsfiddle.net/Koubenec/f8XFW/18/ – Marcatectura

想通了如何使用不太複雜的腳本來達到同樣的效果：

$(function() { 
var y=0; 
$(".down").click(function(e){ 
    e.preventDefault(); 
    $("#container").animate({scrollTop: y+=250}, 500); 
}) 
$(".up").click(function(e){ 
    e.preventDefault(); 
    $("#container").animate({scrollTop: y-=250}, 500); 
})   
})

JsFiddle是here。

來源

2012-10-26 06:57:56 Marcatectura

Coda滑塊和滾動按鈕

回答

相關問題