页面翻页，滑动功能示范代码



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scale=no, maximum-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Pic_Test</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    html,

    body {

      height: 100%;

    }

    #pages-wrap {

      width: 100%;

      height: 100%;

      overflow: hidden;

    }

    .pages-content {

      margin: 0 auto;

      height: 100%;

      background: rgba(7, 17, 27, 0.4);

    }

    .pages {

      height: 25%;

      text-align: center;

      font-size: 30px;

      color: #FFF;

    }

    .p1 {

      background: rgba(7, 17, 27, 0.2);

    }

    .p2 {

      background: rgba(174, 238, 238, 0.2);

    }

    .p3 {

      background: rgba(238, 162, 173, 0.2);

    }

    .p4 {

      background: rgba(152, 251, 152, 0.2);

    }

    @media screen and (min-width: 1000px) {

      .pages-content {

        width: 600px;

      }

    }

  </style>

</head>

<body>

  <div id="pages-wrap">

    <div class="pages-content" style="height: 100%; transform: translate3d(0px, 0px, 0px); transition-duration: 0.3s">

      <div class="pages p1">第一页</div>

      <div class="pages p2">第二页</div>

      <div class="pages p3">第三页</div>

      <div class="pages p4">第四页</div>

    </div>

  </div>

  <script src="jquery-3.3.1.min.js"></script>

  <script type="text/javascript">

    // ==========================全局变量/函数==================================

    var start_y = 0,

      total_distance = 0,

      move_y = 0;

    var pages_wrap = $("#pages-wrap");

    var timer;

    var curr_index = 0; // 当前页

    var screen_height = $(document).height(); // 当前网页可以浏览区域高度

    var wrap = $(".pages-content:last-child");

    var pages = $(".pages");

    var total = pages.length; // 总页面数

    wrap.css("height", total * screen_height + "px") // 修改父容器初始高度

    // 下一页

    function nextPage() {

      curr_index++;

      if (curr_index <= total - 1) {

        var move_y = -(curr_index * screen_height);

        wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");

      } else {

        curr_index = total - 1

        return

      }

    }

    // 上一页

    function prevPage() {

      curr_index--;

      if (curr_index >= 0) {

        var move_y = -(curr_index * screen_height);

        wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");

      } else {

        curr_index = 0

        return

      }

    }

    // 鼠标/手指拖动、翻页功能

    function movePage(client) {

      var start_time = null,

        end_time = null;

      var down = client == "pc" ? "mousedown" : "touchstart";

      var move = client == "pc" ? "mousemove" : "touchmove";

      var up = client == "pc" ? "mouseup" : "touchend";

      var obj = client == "pc" ? $(window) : wrap;

      obj.on(down, function (e) {

        e.preventDefault();

        total_distance = 0;

        wrap.css("transition-duration", "0s");  // 修改动画时间避免造成拖动延迟不流畅

        start_y = client == "pc" ? e.clientY : e.changedTouches[0].clientY;

        start_time = new Date().getTime();   // 移动端判断手指停留屏幕开始时间

        obj.on(move, function (e) {

          e.preventDefault();

          var clientY = client == "pc" ? e.clientY : e.changedTouches[0].clientY;

          var distance_y = clientY - start_y;

          total_distance += distance_y;

          var arr = wrap.css("transform").split(",")

          var y = user_agent.indexOf('rv') > 0 ? parseInt(arr[13].match(/-?\d+/g)) : parseInt(arr[5].match(/-?\d+/g));   // 利用正则，获取样式内Y轴距离

          move_y = y + distance_y;

          start_y = clientY;   // 修改开始Y轴为当前Y轴坐标，为下一个移动距离做基准

          wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");

        });

      });

      obj.on(up, function (e) {

        e.preventDefault();

        end_time = new Date().getTime();   // 移动端判断手指停留屏幕结束时间

        wrap.css("transition-duration", "0.3s");

        wrap.off(move);

        if (client == "pc") { obj.off(move); }

        function isMovePage() {   // 判断上翻、下翻、回弹

          if (total_distance < 0 && move_y >= -(screen_height * (total - 1))) {

            nextPage();

          } else if (total_distance > 0 && move_y < 0) {

            prevPage();

          } else {

            move_y = -(curr_index * screen_height);

            wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");

          }

        }

        if (end_time - start_time <= 200 && Math.abs(total_distance) >= 100) {   // 判断鼠标/手指滑动时间和距离，符合要求直接翻页

          isMovePage();

        } else {

          if (Math.abs(total_distance) >= screen_height / 2) {

            isMovePage();

          } else {

            move_y = -(curr_index * screen_height);

            wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)"); // 定义移动距离不够，回弹当前页面

          }

        }

      });

    }

    // 判断打开页面的平台

    var user_agent = navigator.userAgent.toLowerCase();

    // 判断是否微信浏览器打开

    function isWeixn(ua) {

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        return true;

      } else {

        return false;

      }

    }

    // =========================PC端事件===================================

    // 判断为windows环境

    if (user_agent.indexOf('windows') > 0) {

      // PC端滚轮滑动翻页

      pages_wrap.on("mousewheel", function (e) {

        clearTimeout($.data(this, "timer"));

        $.data(this, "timer", setTimeout(function () {

          if (e.originalEvent.wheelDelta < 0) {

            nextPage();

          }

          if (e.originalEvent.wheelDelta > 0) {

            prevPage();

          }

        }, 100))

      });

      // PC端鼠标拖动翻页

      wrap.on({   // 利用冒泡，达到鼠标在window对象也可以拖动页面滚动

        "mousedown": function () {

          wrap.on("mousemove", function () { });

        },

        "mouseup": function () { }

      })

      movePage("pc");

    }

    // ==========================手机端事件==================================

    // 判断为移动端

    if (user_agent.indexOf("iphone") > 0 || user_agent.indexOf("ipad") > 0 || user_agent.indexOf("ipod") > 0 || user_agent.indexOf("android") > 0) {

      movePage("mobile");

      if (isWeixn(user_agent)) {

      } else {

      }

    }

  </script>

</body>

</html>

页面PC端 / 移动端整屏纵向翻页，点击/触摸滑动效果功能代码非插件的更多相关文章

  1. 使用scrollpagination实现页面底端自动加载无需翻页功能

    当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...

  2. 简易数据分析 08 | Web Scraper 翻页——点击「更多按钮」翻页

    这是简易数据分析系列的第 8 篇文章. 我们在Web Scraper 翻页--控制链接批量抓取数据一文中,介绍了控制网页链接批量抓取数据的办法. 但是你在预览一些网站时,会发现随着网页的下拉,你需要点 ...

  3. pc端vue 滚动到底部翻页

    html: <div class="list" ref="scrollTopList"> <div class="listsmall ...

  4. Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php

    )------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...

  5. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  6. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  7. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  8. Android水平(横向)翻页列表,类似水平GridVIew

    Android水平(横向)翻页列表,类似于水平方向的GridView,行列自定义,但要翻页切换,考虑加载性能,当Item数据很多时加载和翻页要流畅,翻页时要有动画效果,效果图如下: 实现方式: 1:翻 ...

  9. vue2.X简单翻页/分页

    由于业务需要 公司把后台所有数据一次性给前端,数据过多,所以前端需要做一些分页的处理,比较简单的翻页. html代码 <table class="three_td"> ...

随机推荐

  1. mysql 主从，双主同步

    1.创建用户并设置远程访问授权 1). A上添加: //ip地址为B的ip地址,用于B访问 ' with grant option; 2). B上添加://ip地址为A的ip地址,用于A访问 ' wi ...

  2. 绕过CDN查找真实IP方法总结

    CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度等功能模 ...

  3. java代码优化写法1（转摘）

    源文地址:https://blog.csdn.net/qq_15766297/article/details/70503222 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修 ...

  4. <每日一题>题目27：插入排序(假)

    ''' 插入排序:假设元素左侧全部有序,找到自己的位置插入 ''' import random import cProfile def insert_sort(nums): for i in rang ...

  5. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  6. 多线程同步锁和死锁以及synchronized与static synchronized 的区别

    线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序.简而言之:一个程序运行后至少有一个进程,一个进程 ...

  7. 2018-11-26-win10-uwp-获取窗口的坐标和宽度高度

    title author date CreateTime categories win10 uwp 获取窗口的坐标和宽度高度 lindexi 2018-11-26 15:4:0 +0800 2018- ...

  8. 网络结构解读之inception系列四：Inception V3

    网络结构解读之inception系列四:Inception V3   Inception V3根据前面两篇结构的经验和新设计的结构的实验,总结了一套可借鉴的网络结构设计的原则.理解这些原则的背后隐藏的 ...

  9. [转]WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  10. [转]WPF更换主题

    如果要做到一个应用程序其基本的内容不变,但改变整个应用程序的外观可以这样做: 对于每一套外观定义一个ResourceDictionary 在应用程序中,动态加载此应用程序(或窗体)的Resource ...