控制元素到达可视区域内触发动效

控制元素到达可视区域内触发动效，代码参考了别人的，有修改，时间久了，出处想不起来。后面遇到了会补充源码地址。




    
    
    
    
    

    




    

        

        

            

                
青青子衿，悠悠我心。纵我不往，子宁不嗣音？
            
        
        

        

            

                
青青子佩，悠悠我思。纵我不往，子宁不来？
            
        
        

        

            

                
挑兮达兮，在城阙兮。一日不见，如三月兮。 
            
        
        

        

            

                
诗经《国风·郑风·子衿》
            
        
    

在vue中使用

methods: {
    refreshLoopHot:function(){
        //热门商品轮播
        var hotSwiper = new Swiper('#jrg-swiper-product-hot', {
            slidesPerView: 4,
            spaceBetween: 56,
            loop:true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        })
    },
    handleScroll:function(){
        this.winPos = $(window).scrollTop();//距离顶部滚动高度
        if (this.winPos > 600) {
            this.isShowCustomer=true
        }else{
            this.isShowCustomer=false
        }
    },
    handleAnimate:function(){
        var windowHeight = $(window).height();  //窗口高度

        // 添加【data-animatie】
        var dataAnimateEl = $('[data-animate]');
        if (dataAnimateEl.length > 0 ) {
            dataAnimateEl.each(function(){
                var element = $(this);

                var is_Animat  = false; //调用函数计算是否到达可视区域 返回Boolean

                var objHeight = $(element).offset().top;//元素到顶部的高度
                let windowsScrollTop = $(window).scrollTop();//距离顶部滚动
                let val = objHeight-windowsScrollTop;
                if (val < windowHeight && val > 0) {
                    //可视区域
                    // console.log("有动画")
                    is_Animat=true;
                }

                var annimationVal=element.data("animate");
                if (is_Animat) {
                    element.addClass(annimationVal);
                }
            })
        }
    }
},
mounted:function(){
    this.refreshLoopHot()
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('scroll', this.handleAnimate)

    //全局禁用鼠标右键
    document.oncontextmenu = function(){
        return false;
    }
}