javascript - 当最后一只猫显示完整图像时如何发出警报？

Question

当最后一只猫显示完整图像时如何发出警报？

当您点击Click HERE时，猫图像将滑动，我想在显示最后一张猫完整图像时应用我的代码以发出警报(在本次转换中，当点击3次时)

但请不要计算点击。因为我必须在不同的屏幕尺寸中使用。

https://jsfiddle.net/vncxfx0s/5/

    <div style="cursor: pointer;" id="move-left" onclick="left_fn(-222)">
        Click HERE
    </div>


    <div style=" width: 455px; overflow: hidden; ">
        <ul style=" width: 2000em; transition: transform 200ms ease-in-out; transform: translate3d(0px, 0px, 0px); margin-left: -10px; padding: 0;" id="cat-ul">
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/Wc9bszd.jpg">
            </li>
        </ul>
    </div>


<script>
function left_fn(value) {
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)";
    var x = (value + 222);
    var y = (value - 222);
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')')
}
</script>

Answer 1

一种解决方案是使用 jQuery 和 Viewport-plugin。该插件广告了几个新的伪选择器。例如，您可以检查任何元素位于视口(viewport)内部或外部。一个小片段:

if($("#lastChild").is(":in-viewport"))
{
  alert("hhh");
}

请参阅此处了解更多信息:https://www.appelsiini.net/projects/viewport

我用视口(viewport)插件编辑了一个工作 fiddle :https://jsfiddle.net/manumanfred/vncxfx0s/8/