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. linux系统监控常用工具

    linux系统监控常用工具 一.系统核心工具包(coreutils) 1./bin/df 报告系统的磁盘空间用量 df -h  显示磁盘分区fdisk -l 2./bin/uname 显示系统信息 u ...

  2. 100个linux常用命令

    1,echo “aa” > test.txt 和 echo “bb” >> test.txt //>将原文件清空,并且内容写入到文件中,>>将内容放到文件的尾部 2 ...

  3. JOSM学习下载地址

    JOSM is an extensible editor for ​OpenStreetMap (OSM) written in ​Java 7. Currently it supports load ...

  4. Linux常用C函数---字符串转换篇

    函数讲解部分参考http://net.pku.edu.cn/~yhf/linux_c/ atof(将字符串转换成浮点型数) 相关函数 atoi,atol,strtod,strtol,strtoul 表 ...

  5. hdu 1715 大菲波数_java

    用java的大数解决 import java.math.BigInteger; import java.util.Scanner; public class Main { public static ...

  6. Avoid The Lakes

    Avoid The Lakes Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) To ...

  7. Spark里面的任务调度：离SparkContext开始

    SparkContext这是发达国家Spark入学申请,它负责的相互作用和整个集群,它涉及到创建RDD.accumulators and broadcast variables.理解力Spark架构, ...

  8. Unity 利用NGUI2.6.3做技能冷却的CD效果

    NGUI非常强大我们今天来学习一下,如何利用NGUI做技能冷却的CD效果.先导入NGUI的插件.没有的话这里有啊NGUI2.6.3下载地址: http://vdisk.weibo.com/s/KLqn ...

  9. 【最大流】【HDU2883】【kebab】

    题意: 有一个烧烤机,每次最多能烤 m 块肉,现在有 n 个人来买烤肉,每个人到达时间为 si,离开时间为 ei,点的烤肉数量为 ci,点的烤肉所需烘烤时间为 di, 每个人要烤的肉可以分成若干份在同 ...

  10. VS2010中查询替换使用

    MSDN:http://msdn.microsoft.com/zh-cn/library/afy96z92.aspx 例子: