zoukankan      html  css  js  c++  java
  • jquery插件实现上下滑动翻页效果

    <!DOCTYPE >
    <meta charset="utf-8" />
    <head>
        <title>测试jquery</title>
         <script src="jquery.js"></script>
         <script src="swipe.js"></script>
         <script src="jquery.touchSwipe.min.js"></script>
    </head>
    <style type="text/css">
           #div1{
                background-color: red;
                width:100%;
                height: 100%;
                display: block;
                top:-100%;
            position: fixed;
           }
           #div2{
               background-color: blue;
               width: 100%;
               height: 100%;
               display: block;
               top:100%;
               position:fixed;
           }
          #div3{
              background-color: yellow;
              width: 100%;
              height: 100%;
              display: block;
              top: 100%;
              position: fixed;
          }
         #div4{
              background-color:green;
             width: 100%;
             height: 100%;
             display: block;
             position:fixed;
             top: 100%;
         }
    </style>
    <body>
    <div id="div0">
            <div id="div1">我是第一页</div>
            <div id="div2">我是第二页</div>
            <div id="div3">我是第三页</div>
            <div id="div4">我是第四页</div>
    </div>
    </body>
      <script type="text/javascript">
         $(document).ready(function(){
                 var  nowpage=1;
                  load1();
                  function load1(){
                       $("#div1").animate(
                           {top:"0%"},200
                       );
                  }
                  function move1(){
                      $("#div1").animate(
                          {top:"-100%"},200
                      );
                  }
                  function load2(){
                    $("#div2").animate({
                        top:"0%"
                    },200);
                  }    
                function move2to1() {
                    $("#div2").animate({
                        top: "100%"
                    }, 200);
                };
                function move2to3() {
                    $("#div2").animate({
                        top: "-100%"
                    }, 200);
                };
                function load3() {
                    $("#div3").animate({
                        top: "0%"
                    }, 200);
                };
                function move3() {
                    $("#div3").animate({
                        top: "100%"
                    }, 200);
                };
                function move3to4() {
                    $("#div3").animate({
                        top: "-100%"
                    }, 300);
                };
                function load4() {
                    $("#div4").animate({
                        top: "0%"
                    },300);
                };
                function move4() {
                    $("#div4").animate({
                        top: "100%"
                    }, 300);
            };
           $("#div0").swipe({
                    swipe: function(event, direction, distance, duration, fingerCount) {
                        if (direction == "up") {
                            nowpage = nowpage + 1;
                            if (nowpage == 2) {
                                move1();
                                load2();
                            }
                            if (nowpage == 3) {
                                move2to3();
                                load3();
                        } if(nowpage==4){
                            move3to4();
                            load4();    
                        }
                        } else if (direction == "down") {
                            nowpage = nowpage - 1;
                            if (nowpage == 1) {
                        
                                move2to1();
                                load1();
                        }
                            if (nowpage == 2) {
                            
                                move3();
                                load2();
                            }
                            if (nowpage == 3) {
                        
                                move4();
                               load3();
                            }
                        }
                        if (nowpage > 4) {
                            nowpage = 4;
                        }
                        if (nowpage < 0) {
                            nowpage = 0;
                        }
                    }
                });
         });
        </script>
  • 相关阅读:
    windows phone 8 更换锁屏界面图片
    Kinect for Windows 入门与开发
    Windows 8 学习
    windows phone 8 锁屏界面 显示应用程序的消息提醒
    Windows 8 如何在后台播放音频
    C# 4.0 的 Visual Studio 2010 示例
    windows phone 页面切换 动画
    Windows Phone 官方示例学习:Short message dictation and web search grammars sample(语音识别,文字语音)
    Windows Phone 官方示例学习:Background Transfer Service Sample(后台传输)
    打日志流程
  • 原文地址:https://www.cnblogs.com/kangshuai/p/4993847.html
Copyright © 2011-2022 走看看