jQuery模拟原生态App上拉刷新下拉加载效果代码，鼠标上拉时会显示loading字样，并且会模拟加载一条静态数据，支持触屏设备使用。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery模拟原生态App上拉刷新下拉加载效果 </title>

<link rel="stylesheet" href="css/idangerous.swiper.css">

<meta name="viewport" content="width=device-width">

<style>

html {

    height: 100%;

}

body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.5;

    position: relative;

    height: 100%;

    background: #333;

    box-shadow: 0px 0px 100px #000 inset;

}

.preloader {

    position: absolute;

    left: 0;

    top: -100px;

    z-index: 0;

    color: #fff;

    text-align: center;

    line-height: 100px;

    height: 100px;

    width: 100%;

    opacity: 0;

    font-size: 25px;

    -webkit-transition: 300ms;

    -moz-transition: 300ms;

    -ms-transition: 300ms;

    -o-transition: 300ms;

    transition: 300ms;

    background: rgba(0,0,0,0.1);

}

.preloader.visible {

    top: 0;

    opacity: 1;

}

.swiper-container {

    width: 100%;

    height: 100%;

    color: #fff;

    text-align: center;

    position: relative;

    z-index: 10;

}

.red-slide {

    background: #ca4040;

}

.blue-slide {

    background: #4390ee;

}

.orange-slide {

    background: #ff8604;

}

.green-slide {

    background: #49a430;

}

.pink-slide {

    background: #973e76;

}

.swiper-slide {

    height: 100px;

    width: 100%;

    line-height: 100px;

    opacity: 0.2;

    -webkit-transition: 300ms;

    -moz-transition: 300ms;

    -ms-transition: 300ms;

    -o-transition: 300ms;

    transition: 300ms;

}

.swiper-slide-visible {

    opacity: 1;

}

.swiper-slide .title {

    font-style: italic;

    font-size: 42px;

}

</style>

</head>

<body>

<div class="preloader"> Loading... </div>

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide red-slide">

      <div class="title">Slide 1</div>

    </div>

    <div class="swiper-slide blue-slide">

      <div class="title">Slide 2</div>

    </div>

    <div class="swiper-slide orange-slide">

      <div class="title">Slide 3</div>

    </div>

    <div class="swiper-slide green-slide">

      <div class="title">Slide 4</div>

    </div>

    <div class="swiper-slide pink-slide">

      <div class="title">Slide 5</div>

    </div>

    <div class="swiper-slide red-slide">

      <div class="title">Slide 6</div>

    </div>

    <div class="swiper-slide blue-slide">

      <div class="title">Slide 7</div>

    </div>

    <div class="swiper-slide orange-slide">

      <div class="title">Slide 8</div>

    </div>

  </div>

</div>

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

<script src="js/idangerous.swiper.min.js"></script>

<script>

  var holdPosition = 0;

  var mySwiper = new Swiper('.swiper-container',{

    slidesPerView:'auto',

    mode:'vertical',

    watchActiveIndex: true,

    onTouchStart: function() {

      holdPosition = 0;

    },

    onResistanceBefore: function(s, pos){

      holdPosition = pos;

    },

    onTouchEnd: function(){

      if (holdPosition>100) {

        mySwiper.setWrapperTranslate(0,100,0)

        mySwiper.params.onlyExternal=true

        $('.preloader').addClass('visible');

        loadNewSlides();

      }

    }

  })

  var slideNumber = 0;

  function loadNewSlides(){

    setTimeout(function(){

      //Prepend new slide

      var colors = ['red','blue','green','orange','pink'];

      var color = colors[Math.floor(Math.random()*colors.length)];

      mySwiper.prependSlide('<div class="title">jphtml.com '+slideNumber+'</div>', 'swiper-slide '+color+'-slide');

      //Release interactions and set wrapper

      mySwiper.setWrapperTranslate(0,0,0)

      mySwiper.params.onlyExternal=false;

      //Update active slide

      mySwiper.updateActiveSlide(0)

      //Hide loader

      $('.preloader').removeClass('visible');

    },1000)

    slideNumber++;

  }

  </script>

  <div style=" text-align:center;clear:both; width:1000px;font-size:12px;color:#666;margin:20px auto 0 auto;">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

<p>来源：<a href="http://www.jphtml.com/" target="_blank">精品代码</a></p>

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5850747'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/stat.php%3Fid%3D5850747%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>

<iframe width="100%" height="305" frameborder="0" scrolling="no" src="http://app.wumii.com/ext/widget/hot?prefix=http%3A%2F%2Fwww.jphtml.com%2F&num=14&t=1"></iframe>

<script type="text/javascript">

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe961e71123b94dd8f2490c379e8c7567' type='text/javascript'%3E%3C/script%3E"));

</script>

</div>

</body>

</html>

jQuery模拟原生态App上拉刷新下拉加载的更多相关文章

  1. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  2. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  3. Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  4. Flutter学习笔记（25）--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  5. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  6. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 （制作csdn app 四）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  7. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

  8. iOS：延迟加载和上拉刷新/下拉加载的实现

    lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...

  9. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

随机推荐

  1. codevs1039 数的划分

    题目描述 Description 将整数n分成k份,且每份不能为空,任意两种划分方案不能相同(不考虑顺序). 例如:n=7,k=3,下面三种划分方案被认为是相同的. 1 1 5 1 5 1 5 1 1 ...

  2. SEO,你敢说你会吗?

    SEO从何開始学起?SEO基础知识我们须要掌握哪些?SEO是什么?SEO究竟要怎么做?这些问题无时无刻不在困惑着我们.就我个人一些小观点来谈谈一个站点优化的大致步骤. SEO初期阶段 空间域名:空间跟 ...

  3. H面试程序（12）： 输出字符串中第一个只出现一次的字母

    题目描述: 若字符串str为'' sbdddsbfc'',则输出 f; 若字符串str为''aabbccdd'',则输出:字符串str中的字符都出现两次以上 #include <stdio.h& ...

  4. Linux下多核环境Erlang的SMP測试

    目标 (1)       了解在多核cpu环境下,erlang并发进程调度对各个cpu核负载的影响: (2)       Erlang虚拟机的内存添加机理: (3)       Erlang进程的调度 ...

  5. sql必知必会(第四版) 学习笔记一

    温习一遍简单的sql语法,把自己掌握还不够的地方,做了些笔记.... 1 去重复关键词,distinct select distinct sname from student; 2 限制结果top的用 ...

  6. 第一个关于ajax的代码

    昨天由于需要,写了第一个需要ajax的程序,之前只是看过相关介绍,没想到这么有用,记录一下,如有错误,还希望大家提出$(document).ready(function () {//获取url中名字为 ...

  7. asp.net文件操作类

    /** 文件操作类 **/ #region 引用命名空间 using System; using System.Collections.Generic; using System.Text; usin ...

  8. MVC 传参

    介绍一些View中常用的东西 1:传递参数: 1):路由协议中传递参数: 1):eg:比如是这样类似的路由协议,那么我们在传递参数的时候,就要传递 id过去,当然如果,ABCD= UrlParamet ...

  9. 关于UIScrollView属性跟方法的总结

    iOS中UIScollView的总结 在iOS开发中可以说UIScollView是所有滑动类视图的基础,包括UITableView,UIWebView,UICollectionView等等,UIScr ...

  10. zoj1093 Monkey and Banana

    写到现在,发现1025,1076之前写的都是同一种题型:关于DAG的最长路(最短路). 首先要建立模型,根据关系,确定点和点之间的关系,构成一个DAG,前面几道题每个点之间距离默认为1,这一道题不同点 ...