• 模仿微信的下拉刷新效果


    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="jquery1.42.min.js"></script>
    <style type="text/css">
    .dropload-load .loading{
        display: inline-block;
        height: 15px;
         15px;
        border-radius: 100%;
        margin: 6px;
        border: 2px solid #929292;
        border-bottom-color: transparent;
        vertical-align: middle;
        -webkit-animation: rotate 0.75s linear infinite;
        animation: rotate 0.75s linear infinite;
    }
    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    </style>
    </head>
    <body>
    <div id="aa" style=" 100%;height: 200px;text-align: center;line-height: 200px;display: none;background: red">
    正在加载中。。。。
    </div>
    <div style=" 100px;" id="content">
    360doc”是北京六智信息技术有限公司运营的一个免费网络好文收藏和分享的平台网站,用户注册后,即可在360doc上拥有自己的网上图书馆,进行网页文章收藏、管理、分享等操作。
    北京六智信息技术有限公司(360doc)是一家致力于中英文智能文本处理技术(NLP)的研究与应用的高新技术企业。
    核心技术团队由一批具有多年研究与应用经验的博士、硕士构成,经过多年研究,将网络信息获取技术、人工智能中的机器学习和神经网络、统计学、数据库技术、搜索引擎技术有效融合,率先推出了信息自动采集、语义理解及文本挖掘、智能搜索等一整套360doc智能信息聚合引擎(360doc ICE )技术产品,可在竞争情报系统、知识管理系统、行业门户网站、网站内容系统、垂直搜索、科研等领域广泛应用,为用户在信息采集,资源整合方面节约大量的人力与资金。
    公司名称 360doc个人图书馆 总部地点 北京 经营范围 进行网页文章收藏、管理、分享等操作 公司性质 平台网站 官    网 http://www.360doc.com/
    目录
    1 网站申明
    2 网站功能
    ▪ 收录好文
    ▪ 全方位维护收藏的文章
    ▪ 分享知识
    ▪ 结交朋友
    ▪ 个人知识门户
    3 技术特点
    网站申明编辑
    网站上的文章均为 360doc 用户收藏,不代表 360doc 观点。
    网站功能编辑
    我的“个人图书馆”有什么用?
    收录好文
    网上冲浪时,遇到好文章或美图,可以方便快捷地存放到360doc“我的个人图书馆”,供您以后需要时查看!
    看看如何收藏文章?
    全方位维护收藏的文章
    您可以对收藏的文章进行目录式管理,方便以后查找!
    您可以对文章内容进行进一步编辑,只保留有用信息!
    
    </div>
    
    <script type="text/javascript">
    $('body').bind('touchstart',function(e){
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    
    $('body').bind('touchmove',function(e){
        //获取滑动屏幕时的X,Y
        endX = e.originalEvent.changedTouches[0].pageX,
        endY = e.originalEvent.changedTouches[0].pageY;
        //获取滑动距离
        distanceX = endX-startX;
        distanceY = endY-startY;
        //判断滑动方向
      if($(window).scrollTop()==0){
    	  if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
    		  $("#aa").show();
    	        console.log('往下滑动');
    	    }  
      }
      if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
    	  $("#aa").hide();
        }
    
    });
    
    
    
    </script>
    </body>
    </html>
    

      

    请爱好前端技术的朋友,联系我,有问题大家一起讨论
  • 相关阅读:
    Solr使用初探——SolrJ的使用
    Solr使用初探——Solr的安装环境与配置
    solr教程,值得刚接触搜索开发人员一看
    2013已过去,迎来2014,我们该如何规划自己的生活及职业生涯
    搭建集群必备:windows如何使用Xshell远程连接(SSH)Linux
    集群搭建:主机宽带拨号上网,虚拟机使用桥接模式,该如何ping通外网
    什么是Zookeeper,Zookeeper的作用是什么,在Hadoop及hbase中具体作用是什么
    如何搭建云平台,云平台搭建,需要学习什么云技术
    hadoop入门必备基础知识
    如何进行Hadoop二次开发指导视频下载
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6378954.html
Copyright © 2020-2023  润新知