multiscroll.js 来自图库

Question

大家好，

我需要一点帮助！

使用multiscroll.js plugin (https://github.com/alvarotrigo/multiscroll.js), 我想 target 单击 img 以打开正确的部分。

有一个 option 打开一个特定的部分，只需在 ms-section 上添加 class 'active'。（也许是一种方式？）

请注意我不想使用 anchors option。

我不知道该怎么做...

只需打开多卷轴div :

$('img').on('click', function() {
        $('#mosaic').fadeOut();
        $('#multiscroll-nav, #multiscroll, .icon').fadeIn();
    });
    $('.icon').on('click', function() {
        $('#mosaic').fadeIn();
        $('#multiscroll-nav, #multiscroll, .icon').fadeOut();
    });

JSFIDDLE

谢谢。

Answer 1

无论如何你都需要识别图像才能知道跳转到哪里。我使用 src 属性来完成此操作。由于这种奇怪的上下运动，必须完成实际位置的转换。见代码。 (标示新增内容)

$(document).ready(function() {
    var ms = $('#multiscroll');
    $('#multiscroll, #multiscroll-nav').hide();
    ms.multiscroll({
        scrollingSpeed: 1500,
        easing: 'easeInOutExpo',
        navigation: true,
    });

    $('img').on('click', function() {
        $('#mosaic').fadeOut();
        $('#multiscroll-nav, #multiscroll, .icon').fadeIn();
        
        // ADDED THIS >>>
        var clicked_img = this;
        var count = $('#multiscroll').find('img').length;
        var half = Math.ceil( count/2 );
        
        $('#multiscroll').find('img').each(function(i,e) {
            if( e.src == clicked_img.src ) {
                var to;
                if( (i+1) <= half ) {
                   to = (i*2) +1;
                } else {
                    // to = ((i+1)-half) *2; BUGFIX
                    to = (half -(i-count%2)) *2;
                }
                console.log(to);
              
                ms.multiscroll.moveTo(to);
            }
        });
        // <<<
        
    });
    $('.icon').on('click', function() {
        $('#mosaic').fadeIn();
        $('#multiscroll-nav, #multiscroll, .icon').fadeOut();
    });
});

.icon {
    z-index: 9999;
    height: 15vh;
    width: 15vh;
    background-color: red;
    position: absolute;
    top: 1em;
    right: 1em;
    display: none;
}

<ul id="mosaic" class="uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s uk-child-width-1-2" uk-grid>
    <li>
        <a href="#">
  <img src="https://picsum.photos/300/300" alt="" />
 </a>
    </li>
    <li>
        <a href="#">
  <img src="https://loremflickr.com/300/300/dog" alt="" />
 </a>
    </li>
    <li>
        <a href="#">
  <img src="https://loremflickr.com/300/300/paris" alt="" />
 </a>
    </li>
</ul>

<div id="multiscroll">
    <span class="icon"></span>
    <div class="ms-left">
        <div class="ms-section">
            <img src="https://picsum.photos/300/300" alt="" />
        </div>

        <div class="ms-section">
            <h1>DOG</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/paris" alt="" />
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section">
            <h1>BEACH</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/dog" alt="" />
        </div>

        <div class="ms-section">
            <h1>PARIS</h1>
        </div>
    </div>
</div>



















<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>

multiscroll.js 来自图库

multiscroll.js from gallery

javascript

jquery

multiscroll.js