zoukankan      html  css  js  c++  java
  • 当滚动条滚动当前页时,内容从上、下、左、右中某个方向进去页面

    $(function(){
        if (screen.width > 1180) {
            $("html").removeClass("root61");
        } else {
            $("html").addClass("root61");
        }
    
        function show(obj,className){
            var clientH=document.documentElement.clientHeight||document.body.clientHeight;
            var scrollT=$(this).scrollTop();
            for(var i=0;i<obj.length;i++){
                var introH=$(obj[i]).height();
                if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
                    $(obj[i]).addClass(className);
                }
            }
             $(document).on("scroll",function(){
             var scrollT=$(this).scrollTop();
             for(var i=0;i<obj.length;i++){
             var conH=$(obj[i]).height();
             if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
             $(obj[i]).addClass(className);
             }
             }
             })
        }
        show($(".intro_leftM"),"left_move");
        show($(".intro_rightM"),"right_move");
        show($(".intro_topM"),"top_move");
        show($(".intro_bottomM"),"bottom_move");
    });
    .left_move {
        -webkit-animation: left_move 2s linear;
        -moz-animation: left_move 2s linear;
        -o-animation: left_move 2s linear;
        -ms-animation: left_move 2s linear;
        animation: left_move 2s linear;
    }
    
    @keyframes left_move {
        0% {
            transform: translate(-30px, 0);
            opacity: 0
        }
        100% {
            transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-webkit-keyframes left_move {
        0% {
            -webkit-transform: translate(-30px, 0);
            opacity: 0
        }
        100% {
            -webkit-transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-moz-keyframes left_move {
        0% {
            -moz-transform: translate(-30px, 0);
            opacity: 0
        }
        100% {
            -moz-transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-ms-keyframes left_move {
        0% {
            -ms-transform: translate(-30px, 0);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        100% {
            -ms-transform: translate(0px, 0);
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
    
    @-o-keyframes left_move {
        0% {
            -o-transform: translate(-30px, 0);
            opacity: 0;
        }
        100% {
            -o-transform: translate(0px, 0);
            opacity: 1;
        }
    }
    
    .right_move {
        -webkit-animation: right_move 2s linear;
        -ms-animation: right_move 2s linear;
        -moz-animation: right_move 2s linear;
        -o-animation: right_move 2s linear;
        animation: right_move 2s linear;
    }
    
    @keyframes right_move {
        0% {
            transform: translate(30px, 0);
            opacity: 0
        }
        100% {
            transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-webkit-keyframes right_move {
        0% {
            -webkit-transform: translate(30px, 0);
            opacity: 0
        }
        100% {
            -webkit-transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-moz-keyframes right_move {
        0% {
            -moz-transform: translate(30px, 0);
            opacity: 0
        }
        100% {
            -moz-transform: translate(0px, 0);
            opacity: 1
        }
    }
    
    @-ms-keyframes right_move {
        0% {
            -ms-transform: translate(30px, 0);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        100% {
            -ms-transform: translate(0px, 0);
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
    
    @-o-keyframes right_move {
        0% {
            -o-transform: translate(30px, 0);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        100% {
            -o-transform: translate(0px, 0);
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
    
    .top_move {
        -webkit-animation: top_move 2s linear;
        -ms-animation: top_move 2s linear;
        -moz-animation: top_move 2s linear;
        -o-animation: top_move 2s linear;
        animation: top_move 2s linear;
    }
    
    @keyframes top_move {
        0% {
            transform: translate(0px, 30px);
            opacity: 0
        }
        100% {
            transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-webkit-keyframes top_move {
        0% {
            -webkit-transform: translate(0px, 30px);
            opacity: 0
        }
        100% {
            -webkit-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-moz-keyframes top_move {
        0% {
            -moz-transform: translate(0px, 30px);
            opacity: 0
        }
        100% {
            -moz-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-o-keyframes top_move {
        0% {
            -o-transform: translate(0px, 30px);
            opacity: 0
        }
        100% {
            -o-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-ms-keyframes top_move {
        0% {
            -ms-transform: translate(0px, 30px);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        100% {
            -ms-transform: translate(0px, 0px);
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
    
    .bottom_move {
        -webkit-animation: bottom_move 2s linear;
        -moz-animation: bottom_move 2s linear;
        -o-animation: bottom_move 2s linear;
        animation: bottom_move 2s linear;
    }
    
    @keyframes bottom_move {
        0% {
            transform: translate(0px, -30px);
            opacity: 0
        }
        100% {
            transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-webkit-keyframes bottom_move {
        0% {
            -webkit-transform: translate(0px, -30px);
            opacity: 0
        }
        100% {
            -webkit-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-moz-keyframes bottom_move {
        0% {
            -moz-transform: translate(0px, -30px);
            opacity: 0
        }
        100% {
            -moz-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-o-keyframes bottom_move {
        0% {
            -o-transform: translate(0px, -30px);
            opacity: 0
        }
        100% {
            -o-transform: translate(0px, 0px);
            opacity: 1
        }
    }
    
    @-ms-keyframes bottom_move {
        0% {
            -ms-transform: translate(0px, -30px);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        100% {
            -ms-transform: translate(0px, 0px);
            opacity: 1;
            filter: alpha(opacity=100);
        }
    }
  • 相关阅读:
    集合(双列)
    集合(单列)
    Struts2.0第三章(文件上传、ajax开发、json、Fastjson、Jackson、注解开发)
    Struts2.0第二章(封装数据获取请求参数、servlet api的获取、ServletActionContext、注入、ognl、valueStack、ActionContext、interceptor拦截器)
    Struts2.0第一章(struts2.0概述,使用步骤,执行流程,各配置文件介绍,Action详解)
    servlet3.0实现文件上传功能
    annotation注解
    ClassLoader类加载器
    Proxy 动态代理(在过滤器中对request使用动态代理解决接受参数乱码问题)
    Filter过滤器(自动登陆、通用的字符集编码的过滤【处理不同请求的乱码问题】、。。。)
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5750085.html
Copyright © 2011-2022 走看看