Question

screenshot

当点击箭头时，我需要同时动画/滑动投资组合页面上的两个div（根据附加图像，笔记本电脑和手机上的屏幕截图）。我可以适度地理解/更改JS插件，并且非常精通HTML / CSS。任何推荐的插件或方法，而无需编写特定的JS代码？

P.S我正在使用Zurb的基础架构，它内置了'Orbit'滑块插件，不确定它是否可以自定义以实现此功能

Answer 1

jQuery中的动画函数用于异步，因此您可以同时调用元素的动画：

var deltaW = window.innerWidth;

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW});

您还可以在动画完成时触发功能：

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW }, function() { /*.. do something ..*/});

编辑：工作示例（请注意css规则的位置属性）：
http://jsfiddle.net/2gCKY/1/

Answer 2

没有开箱即用的方法，但你可以乱搞。假设你有以下轨道：

<div class="row">
    <div class="large-8 columns">
        <ul data-orbit id="slider1">
            <li>
            <img src="http://placehold.it/800x350&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="large-4 columns">
        <ul data-orbit id="slider2">
            <li>
            <img src="http://placehold.it/400x150&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>

您可以点击导航箭头来同步两个轨道的滑动，如果两个轨道具有相同的timer_speed （默认情况下会是这样）：

<script type="text/javascript">
    $(document).foundation();
    $(document).ready(function () {
        var fromSlide1 = false;
        var fromSlide2 = false;
        var slider1 = $("#slider1");
        var slider2 = $("#slider2");
        var slider1Prev = slider1.parent().find(".orbit-prev");
        var slider2Prev = slider2.parent().find(".orbit-prev");
        var slider1Next = slider1.parent().find(".orbit-next");
        var slider2Next = slider2.parent().find(".orbit-next");

        slider1Prev.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Prev.click();
            fromSlide1 = false;
        });
        slider2Prev.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Prev.click();
            fromSlide2 = false;
        });
        slider1Next.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Next.click();
            fromSlide1 = false;
        });
        slider2Next.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Next.click();
            fromSlide2 = false;
        });
    });
</script>

使用Foundation的Orbit内容滑块同时滑动两个div

2 个答案: