javascript - 来自画廊的 multiscroll.js

Question

大家好，

我需要一点帮助!

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

有一个选项可以打开特定部分，只需在ms-section上添加类'active'即可。 (也许有办法？)

请注意，我不想使用 anchor 选项。

我不知道该怎么做...

只需打开多滚动 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>