创建滚动指针动画

Question

我正在尝试创建一种效果，当您翻转图像时，指针将指向它。与本网站中使用的相同，约为一半：https://thecleansekitchen.com.au/

我不确定从哪里开始，或者是否有任何JQuery或插件，但我找不到？

任何帮助表示感谢。

Answer 1

我确定有一些jQuery插件可以做到这一点，但这可能是不必要的。您可以使用一些基本的HTML，CSS和JavaScript轻松完成此任务。

我创建了一个JSFiddle，试图帮助您入门。 https://jsfiddle.net/x823m6ff/

请注意，上述情况非常粗糙，您肯定需要按摩它以满足您的需求，但希望它能帮助您开始正确的道路。

我也会在这里列出代码来解释。

HTML：

<div class="container">
    <div class="block">
        <div class="arrow arrow-down"></div>
    </div>
    <div class="block">
        <div class="arrow arrow-down"></div>
    </div>
    <div class="block">
        <div class="arrow arrow-down"></div>
    </div>
</div>

对于HTML，我创建了一个包含三个块的容器（如截图）。每个块都有一个通过CSS隐藏的子arrow元素。

CSS：

.container {
    width: 960px;
    margin: 0 auto;
}

.block {
    width: 100px;
    height: 150px;
    background-color: #000;
    float: left;
    margin-right: 20px;
    position: relative;
}

.arrow {
    display: none;
    position: absolute;
    top: 0;
    left: 25%;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;

    border-top: 25px solid #FFF;
}

CSS为我们的块设置一些宽度和高度，并创建箭头元素。我们将这些箭头元素相对于每个块定位，并将它们放在每个块的顶部中间。

JavaScript的：

$(document).ready(function() {
    $('.block').hover(function() {
        $(this).find('.arrow').show();
    }, function() {
        $(this).find('.arrow').hide();        
    });
});

上面的JavaScript非常简单，基本上只是监听鼠标悬停在我们的块上，并根据用户鼠标在块上的状态显示/隐藏我们的箭头。