jQuery网页滚动网页元素依次获得焦点效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery制作网页滚动网页元素依次获得焦点效果

主要js

<script>
    var scrollArrty = ['.con1', '.con2', '.con3', '.con4', '.con5', '.con6', '.con7'];
    var scrI = 0;
    var scrHeight = window.screen.availHeight;
    $(window).scroll(function () {
        scrollFx();
    })
    function scrollFx() {
        if (scrI == scrollArrty.length) {
            return false;
        }
        var boxPos = $(scrollArrty[scrI]).offset().top;
        var winPos = $(window).scrollTop() + scrHeight - 300;
        if (boxPos < winPos) {
            $(scrollArrty[scrI]).addClass('active');
            scrI++;
            if (scrI < scrollArrty.length) {
                scrollFx();
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    scrollFx(); 
</script>