Question

我实际上正在我的网站上工作（http://www.thierryandrianalisoa.com/site_v2/）但是我对Jquery不够好找到一种方法来做我想做的事情。我想使用与下面的网站相同的操作但是横向。更具体地说，使用鼠标滚轮我想去网站的另一部分，而不仅仅是移动。

http://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=BeoPlay%2BA9%2B%3A%2BAll#video

谢谢，

到目前为止，我所做的是尝试使用scrollLeft而不是scrollTop来调整这个人的工作。



// set to true to see the console.log debug info
var debug = false;

// setup default index of 0
var index = 0;

// setup scrolling flag
var scrolling = false;

// cache a few elements for reference
var win = $( window );
var body = $( 'body' );
var container = $( '.container' );

// setup a few more variables for future use
var lastLeft = 0;
var current, offset;

// bind scroll event
win.on( 'scroll', function( ev ) {
    // prevent the default event
    ev.preventDefault();
    // check to make sure we don't fire the scroll multiple times
    if ( debug ) console.log( scrolling, 'scrolling' );
    if ( scrolling ) return;

    // set the scrolling flag to true
    scrolling = true;

    // run the update function
    updateActive();

    // clear the scrolling flag to allow the user to access the next element
    setTimeout( function() { scrolling = false; }, 500 );

    // update a few variables for the next interaction
    current = container.find( '.inner[data-index='+index+']' );
    offset = current.offset();
    lastLeft = offset.left;

    // handle the animation
        $('html').animate({
            scrollLeft: offset().left
        }, 2000);
        event.preventDefault();
        $('body').animate({
            scrollLeft: offset().left
        }, 2000);
        event.preventDefault();

});

function updateActive() {
    // get the current top offset
    var left = win.scrollLeft();
    // determine which direction we are scrolling
    if ( left > lastLeft ) { 
        // down
        if ( debug ) console.log( 'scrolling right' );
        // let make sure we aren't on the last element
        if ( debug ) console.log( index, $( '.inner' ).length );
        if ( index == $( '.inner' ).length - 1 ) {
            if ( debug ) console.log( 'on last element, nothing to do' );
            return;
        }

        // update index & top
        if ( debug ) console.log( index, 'index before' );
        index++;
        if ( debug ) console.log( index, 'index after' );
        lastLeft = left;

    } else { 
        // up
        if ( debug ) console.log( 'scrolling up' );
        // let make sure we aren't on the first element
        if ( ! index ) {
            if ( debug ) console.log( 'on first element, nothing to do' );
            return;
        }

        // update index & top
        if ( debug ) console.log( index, 'index before' );
        index--;
        if ( debug ) console.log( index, 'index after' );
        lastLeft = left;

    }
}

// set to true to see the console.log debug info var debug = false; // setup default index of 0 var index = 0; // setup scrolling flag var scrolling = false; // cache a few elements for reference var win = $( window ); var body = $( 'body' ); var container = $( '.container' ); // setup a few more variables for future use var lastLeft = 0; var current, offset; // bind scroll event win.on( 'scroll', function( ev ) { // prevent the default event ev.preventDefault(); // check to make sure we don't fire the scroll multiple times if ( debug ) console.log( scrolling, 'scrolling' ); if ( scrolling ) return; // set the scrolling flag to true scrolling = true; // run the update function updateActive(); // clear the scrolling flag to allow the user to access the next element setTimeout( function() { scrolling = false; }, 500 ); // update a few variables for the next interaction current = container.find( '.inner[data-index='+index+']' ); offset = current.offset(); lastLeft = offset.left; // handle the animation $('html').animate({ scrollLeft: offset().left }, 2000); event.preventDefault(); $('body').animate({ scrollLeft: offset().left }, 2000); event.preventDefault(); }); function updateActive() { // get the current top offset var left = win.scrollLeft(); // determine which direction we are scrolling if ( left > lastLeft ) { // down if ( debug ) console.log( 'scrolling right' ); // let make sure we aren't on the last element if ( debug ) console.log( index, $( '.inner' ).length ); if ( index == $( '.inner' ).length - 1 ) { if ( debug ) console.log( 'on last element, nothing to do' ); return; } // update index & top if ( debug ) console.log( index, 'index before' ); index++; if ( debug ) console.log( index, 'index after' ); lastLeft = left; } else { // up if ( debug ) console.log( 'scrolling up' ); // let make sure we aren't on the first element if ( ! index ) { if ( debug ) console.log( 'on first element, nothing to do' ); return; } // update index & top if ( debug ) console.log( index, 'index before' ); index--; if ( debug ) console.log( index, 'index after' ); lastLeft = left; } }

用鼠标滚轮水平滚动到锚点

0 个答案: