返回官网

前端JS代码,页面滚动到某个位置时 某个DIV滑入

狒狒 2019-8-3 技术札记 519 次


前端JS代码,当页面滚动到某个位置时  某个DIV执行滑动的动作

这样会让页面看起来活泼些


 /**
     * 当页面到达某个位置时执行
     * @param {type} arriveDiv 到达的DIV
     * @param {type} div 执行移动的DIV
     * @param {type} types 移动的方向
     * @param {type} movePX 移动的像素
     * @param {type} moveSpeed 移动的速度
     * @param {type} times 移动延迟的时间
     * @returns {undefined}
     */
   function pageScroll(arriveDiv,div,types,movePX,moveSpeed,times){
        var a,b,c;
        a = $(window).height();    //浏览器窗口高度
        var group = arriveDiv;
        $(window).scroll(function(){
            b = $(this).scrollTop();   //页面滚动的高度
            c = group.offset().top;    //元素距离文档(document)顶部的高度
            if(a+b>c){
                if(types=='left'){
                    setTimeout(function () {
                        div.animate({left:movePX},moveSpeed); 
                    },times);
                } 
                if(types=='right'){
                    setTimeout(function () {
                        div.animate({right:movePX},moveSpeed); 
                    },times);
                } 
                if(types=='top'){
                    setTimeout(function () {
                        div.animate({top:movePX},moveSpeed); 
                    },times);
                } 
                if(types=='bottm'){
                    setTimeout(function () {
                        div.animate({bottm:movePX},moveSpeed); 
                    },times);
                }
               
            } 
        });
   }

发表评论

Copyright © 2016 DEWEBSTUDIO