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

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

当您单击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>

最佳答案

一种解决方案是使用jQuery和Viewport插件。插件广告中有几个新的伪选择器。例如，您可以检查视口内部或外部的任何元素。一个小片段：

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

有关更多信息，请参见此处：https://www.appelsiini.net/projects/viewport

我用视口插件编辑了一个有效的小提琴：https://jsfiddle.net/manumanfred/vncxfx0s/8/