vue+jq图片全屏滚动切换动画效果

1. 遍历图片,图片设置id(本人用遍历索引设置为每个图片id),  设置全局变量switch = true控制滚动开关;
2. 监听滚动事件
	document.addEventListener('mousewheel',this.scroll);  //兼容性 暂时没考虑
3. 滚动事件处理函数
	scroll(e) {
		var that = this
	        var e = e || event;
	        that.fullPageScroll(e, that)
	},
	fullPageScroll (e, that) {
        let t = this;
        if (that.switch) {
            that.switch = false;
            if (e.wheelDelta > 0 || e.detail < 0) {
                that.switch = t.upscroll(e, that);  
            }
            if (e.wheelDelta < 0 || e.detail > 0) {
                that.switch = t.downscroll(e, that);
            }
        };
    },
    downscroll(e, that) {
        let id = parseInt(e.target.parentElement.id) + 1;   //当前图片下一页id
        if (!e.target.id) {  //当前id找不到时父节点找,这里可以灵活处理
            id = parseInt(e.target.parentNode.id) + 1;
        }
        $(document.getElementById(id)).find('.des_model').fadeOut(0)  //图片文字出现隐藏效果
        if (document.getElementById(id)) {
            $('html ,body').animate({scrollTop: document.getElementById(id).offsetTop - 80}, 500);  //下一页动画出现
            setTimeout(function () {
                $(document.getElementById(id)).find('.des_model').fadeIn(1500)  //图片文字动画出现(des_model图片文字div的class值)
                that.switch = true;
            }, 500);
        } else {
            setTimeout(function () {
                $(document.getElementById(id)).find('.des_model').fadeIn(1500)
                that.switch = true;
            }, 500);
        }
    },
    upscroll(e, that) {
        let id = parseInt(e.target.parentElement.id) - 1;
        if (!e.target.parentElement.id) {
            id = parseInt(e.target.parentNode.parentNode.id) - 1;
        }
        $(document.getElementById(id)).find('.des_model').fadeOut(0);
        if (document.getElementById(id)) {
            if (document.documentElement.scrollTop + document.documentElement.clientHeight + 350 > document.documentElement.scrollHeight) { //底部单独处理
                setTimeout(function () {
                    $(document.getElementById(id)).find('.des_model').fadeIn(1500);
                    that.switch = true;
                }, 500);
            }
            $('html ,body').animate({scrollTop: document.getElementById(id).offsetTop - 80}, 500);
            $(document.getElementById(id)).find('.des_model').fadeIn(1500);
            setTimeout(function () {
                that.switch = true;
            }, 500);
        } else {
            setTimeout(function () {
                $(document.getElementById(id)).find('.des_model').fadeIn(1500);
                that.switch = true;
            }, 500);
        }
    }