模仿微信的下拉刷新效果

<%@ 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;
    width: 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="width: 100%;height: 200px;text-align: center;line-height: 200px;display: none;background: red">
正在加载中。。。。
</div>
<div style="width: 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>
posted @ 2017-02-08 16:51 刘浩2561179983 阅读(251) 评论(0) 编辑收藏举报
刷新页面返回顶部
浩

模仿微信的下拉刷新效果

公告
