简单实现页面加载、滑动切换页面、淡出淡入效果

2019-03-20

2856 次瀏覽

3490字数

css部分
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .fulldiv{
            width: 100%;
            height: 100%;
        }
        #page1{
            background: red;
            display: block;
        }
        #page2{
            background: green;
            display: none;
            position: relative;
            opacity: 0;
        }
        #test{
            width: 100px;
            height: 100px;
            border: 2px solid black;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        #wenzi{
            width: 300px;
            height: 40px;
            font-size: 25px;
            border: 2px solid black;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        #page3{
            background: skyblue;
            display: none;
        }
    </style>

html部分

<div class="fulldiv" id="page1">
        <div id="wenzi">1%</div>
    </div>
    <div class="fulldiv" id="page2">
        <div id="test">666</div>
    </div>
    <div class="fulldiv" id="page3">
        <div id="wenzi">
            here is 3 page
        </div>
    </div>
    <script type="text/javascript">
        function by(element){
            var newElement = document.getElementById(element);
            return newElement;
        }
        document.onreadystatechange = function (){
            if(document.readyState == "loading"){
                by("wenzi").innerHTML = "25%";
            }else if(document.readyState == "interactive"){
                by("wenzi").innerHTML = "50%";
            }else if(document.readyState == "complete"){
                var num = 66;
                var st = setInterval(function(){
                    num+=Math.round(Math.random()*10);
                    by("wenzi").innerHTML = num+"%";
                    if(num>=95){
                        by("wenzi").innerHTML = 100+"%";
                        clearInterval(st);
                        changePage("page1","page2");
                    }
                },1200);
            }
        }
        function fadeOut(element){
            var speed = speed || 30;
            var num = 10;
            var st = setInterval(function(){
                num--;
                by(element).style.opacity = num/10;
                by(element).style.display = "none";
                if(num<=0){
                    clearInterval(st);
                }
            },speed);
        }
        function fadeIn(element,speed){
            var speed = speed || 30;
            var num =0;
            var st = setInterval(function(){
                by(element).style.display = "block";
                num++;
                by(element).style.opacity = num/10;
                if(num>=10){
                    clearInterval(st);
                }
            },speed);
        }
        function changePage(firstElement,secondElement){
            fadeOut(firstElement);
            fadeIn(secondElement);
        }
        var startx,starty,endx,endy;
        document.addEventListener("touchstart",function(e){
            startx = Math.round(e.touches[0].pageX);
            starty = Math.round(e.touches[0].pageY);
            console.log(starty);
        },false);
        document.addEventListener("touchend",function(e){
            endx = Math.round(e.changedTouches[0].pageX);
            endy = Math.round(e.changedTouches[0].pageY);
            var result = getResult();
            updatePage(result,"page2","page3");
        },false);
        function getResult(){
            // only by the the value is 1 can be allowed 
            var value = 0;
            if(((starty-endy)/starty)*100>=20){
                if((Math.abs(startx-endx)/startx)*100<=30){
                    value = 1;
                }
            }else{
                console.log("not allow");
            }
            return value;
        }
        function updatePage(key,element1,element2){
            var result = key;
            if(result==1){
                changePage(element1,element2);
            }
        }
    </script>

最后修改：2023-04-01