H5下拉刷新特效demo，动画流畅
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<title></title>
<style>
body {
font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
color: #4C4747;
} body, div, p {
padding: 0px;
margin: 0px;
} .pull_drawing {
position: absolute;
top: -76px;
width: 100%;
padding-top: 22px;
background: url(http://pic.c-ctrip.com/h5/tuan/load_text.png) no-repeat center 0;
background-size: 172px 22px;
height: 35px;
line-height: 35px;
text-align: center;
} .loading_icon {
position: absolute;
margin-left: -25px;
margin-top: 8px;
width: 14px;
height: 14px;
border: 2px solid #54a5d4;
border-radius: 50%;
-webkit-animation: roll 1s linear infinite;
animation: roll 1s linear infinite;
clip: rect(0,15px,18px,0);
line-height: 35px;
text-align: center;
} @-webkit-keyframes roll {
0% {
-webkit-transform: rotate(0deg);
} 100% {
-webkit-transform: rotate(360deg);
}
} @keyframes roll {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(360deg);
}
}
.main {
width: 100%;
border: solid 1px #0094ff;
}
.textbg {
width: 100%;
line-height: 30px;
background-color: #F2F2F2;
font-size: 17px;
font-family: 'Adobe Garamond Pro';
}
.textbg p{
text-indent: 30px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="background-color: #f5f5f5"> <div id="main" class="main">
<p class="pull_drawing">
<i class="loading_icon"></i>
<span class="loading_text">下拉刷新中</span>
</p>
<div class="textbg">
<p>
携程是一个在线票务服务公司，创立于1999年，总部设在中国上海。携程旅行网拥有国内外六十万余家会员酒店可供预订，是中国领先的酒店预订服务中心。携程旅行网已在北京、广州、深圳、成都、杭州、厦门、青岛、沈阳、南京、武汉、南通、三亚等17个城市设立分公司，员工超过25000人。2003年12月，携程旅行网在美国纳斯达克成功上市。
</p>
<p>
携程旅行网成功整合了高科技产业与传统旅游行业，向超过9000万会员提供集酒店预订、机票预订、度假预订、商旅管理、特惠商户及旅游资讯在内的全方位旅行服务。携程旅行网除了在自身网站上提供丰富的旅游资讯外，还委托出版了旅游丛书《携程走中国》，并委托发行旅游月刊杂志《携程自由行》。
</p>
<p>
2015年10月26日携程网和去哪儿宣布合并，百度将通过此交易完成前拥有的178,702,519股去哪儿网A类普通股1和11,450,000股去哪儿B类普通股置换成11,488,381股携程增发的普通股。[1] 2016年4月21日，携程网和东航集团在上海签订战略合作框架协议，宣布双方及其下属各级控股投资公司将在业务、股权、资本市场等领域开展合作。
</p>
<h3>旅游度假产品</h3>
<p>
携程度假提供数百条度假产品线路，包括“三亚”、“云南”、“港澳”、“泰国”、“欧洲”“名山”、“都市”、“自驾游”等20余个度假专卖店，每个“专卖店”内拥有不同产品组合线路多条。客人可选择由北京、上海、广州、深圳、杭州、成都、沈阳、南京、青岛、厦门、武汉十一地出发。 </p>
<h3>酒店预订服务</h3>
<p>
携程旅行网拥有中国领先的酒店预订服务中心，为会员提供即时预订服务，合作酒店超过32000家，遍布全球138个国家和地区的5900余个城市，有2000余家酒店保留房。
<h3>
高铁代购服务
</h3>
<p>
携程于2011年7月5日推出高铁频道，为消费者提供高铁和动车的预订服务，“暂只提供上海市、江苏省、浙江省、安徽省配送服务。暂提供7天内的高铁及动车票的代购服务。”
</p>
<h3>携程信用卡,功能与服务</h3>
<p>
金穗携程旅行信用卡是中国农业银行股份有限公司（以下简称：中国农业银行）与携程旅行网合作发行的金穗系列品牌贷记卡，该卡集金穗贷记卡金融功能以及携程VIP会员卡功能于一体，秉承中国农业银行与携程旅行网的优质服务。
</p>
<h3>主要特点</h3>
<p>
1.金穗携程旅行信用卡，即是携程VIP会员卡，又是农行金穗贷记卡。在携程旅行网消费既可累积携程积分，同时还可以累积信用卡积分（其中“携程积分”为：电话或网上预订积分系数为1，无线预订积分系数为2 ）。
</p><p>
</p><p>
2.使用金穗携程旅行信用卡，即可享有“金融账户+银行积分+携程积分+旅行储备金”4个专享账户。
</p><p>
3.持金穗携程旅行信用卡，即可预订全球134个国家的28000余家2-5星级酒店。
</p><p>
4.持金穗携程旅行信用卡，即可实现国内、国际航线机票信息查询；异地出发，本地订票、取票。更可以享受携程独家推出的电子机票服务。
</p><p>
5.凭此卡即可享受携程VIP会员各种优惠礼遇，专享酒店折扣、机票折扣、度假折扣，其中包括千余条度假、旅游优惠线路以及全国3000余家特约商户专享餐饮娱乐高额消费折扣。
</p>
<h3>携程礼品卡</h3>
<p>
介绍
</p><p>
携程旅行网自2011年推出代号为“游票”的预付卡产品，并逐步深度优化产品的用户体验及支付范围，2013年，正式定名“携程礼品卡”。已有“任我行”、“任我游”两类产品供选择。
<h3>功能用途</h3>
<p>
携程礼品卡(任我行)可预订预付费类酒店、惠选酒店、机票、旅游度假产品、火车票产品、团购产品。(注：自由机+酒产品、门票类产品、代驾租车产品及银行专享类旅游度假产品等暂不支持礼品卡支付。)
</p><p>
携程礼品卡(任我游)可预订预付费类酒店、惠选酒店、旅游度假产品、团购产品。
</p><p>
携程宝是携程旅行网自2013年起独家推出的礼品卡优惠套餐产品。拥有“任我行”和“任我游”两个系列，每个系列分别包含 “90天”、“180天”及“月月返”三款产品。携程宝提倡有计划的科学出行理念。用户可根据自己的出行需求提前规划自己的预算，选购最适合的携程宝产品，获取最大的优惠。[7-8]
<h3>票价比价</h3>
<p> 携程网推出的机票、火车票同时预订功能在国内在线旅游行业中尚属首次出现。该功能来源于对用户行为习惯的深入观察，创新性地将机票和火车票放在同一页面进行价格上的对比，改变了传统火车票单一的订票页面模式，解决了因价格选择难的问题。 </p>
</div>
</div> <script> var slidePlug = function (target, height, loading_text, loading_icon, className, callback) {
var _hasPhone = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
var _hasTouch = 'ontouchstart' in window;
var _pulldownConfig = { normalStatus: "下拉即可刷新", maxStatus: "松开即可刷新", releaseStatus: "努力刷新中…" };
var _start = 0,_end = 0;
var $target = $(target),$loading_text = $(loading_text),$loading_icon = $(loading_icon);
var _TransitionObj = {
translate: function (height) {
$target.css({ "-webkit-transform": "translate(0," + height + "px)", "transform": "translate(0," + height + "px)" });
},
translitionTime: function (time) {
$target.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" });
},
goDefault: function () {
_TransitionObj.translitionTime(0.5);
_TransitionObj.translate(0);
}
};
var _bindTouchEvents = function () {
$target.bind("touchstart", _touchstartHandler);
$target.bind("touchmove", _touchmoveHandler);
$target.bind("touchend", _touchendHandler);
};
var _touchstartHandler = function (e) {
$loading_icon.removeClass(className);
var even = typeof event == "undefined" ? e : event;
//保存当前鼠标Y坐标
_start = _hasTouch ? even.touches[0].pageY : even.pageY;
if ($target.scrollTop() > 0) {
console.log($target.scrollTop());
//消除滑块动画时间
_TransitionObj.translitionTime(0);
}
};
var _touchmoveHandler = function (e) {
var even = typeof event == "undefined" ? e : event;
//保存当前鼠标Y坐标
_end = _hasTouch ? even.touches[0].pageY : even.pageY;
if (_end - _start > height) {
$loading_text.html(_pulldownConfig.maxStatus);
} else {
$loading_text.html(_pulldownConfig.normalStatus);
}
even.preventDefault();
//消除滑块动画时间
_TransitionObj.translitionTime(0);
_TransitionObj.translate(_end - _start);
};
var _touchendHandler = function (e) {
//判断滑动距离是否大于等于指定值
if (_end - _start >= height) {
$loading_icon.addClass(className);
//设置滑块回弹时间
_TransitionObj.translitionTime(1);
//保留提示部分
_TransitionObj.translate(0);
//执行回调函数
if (typeof callback == "function") {
callback.call(_TransitionObj, e);
}
} else {
//返回初始状态
_TransitionObj.goDefault();
}
}
var exports = {
_unbindTouchEvents : function () {
$target.unbind("touchstart", _touchstartHandler);
$target.unbind("touchmove", _touchmoveHandler);
$target.unbind("touchend", _touchendHandler);
}
}
_bindTouchEvents();
return exports;
} var slideObj = new slidePlug(document.getElementById('main'),
60,
document.getElementsByClassName("loading_text"),
document.getElementsByClassName("loading_icon"),
"loading_icon"
);
</script>
</body>
</html>
H5下拉刷新特效demo，动画流畅的更多相关文章
- 优雅的H5下拉刷新【minirefresh】
序 严格的来说,这是我第一个完全投入的开源项目,它的出现是为了统一移动H5中的下拉刷新,想通过一套框架,多主题拓展方式,适应于任意需求下的任意下拉刷新场景. 另外,这个项目作为独立项目存在,希望能有更 ...
- 移动端上拉加载，下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端提升生产力系列三（vant3 vue3 移动端H5下拉刷新，上拉加载组件的封装）
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...
- H5 下拉刷新、加载更多
H5 下拉刷新.加载更多 demos const autoLoadMore = (url = ``) => { // todo ... } refs xgqfrms 2012-2020 www. ...
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
- 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- ListView下拉刷新，上拉自动加载更多
下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图. ...
- iOS开源项目推荐｜下拉刷新
MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. CBStoreHouseRefresh ...
- ListView装上拉电阻下拉刷新
主要用到了这个几个文件.MainActivity是界面的Activity,MyAdapter是ListView的自己定义适配,MyListView是自己定义带头部LIistView,假设仅仅须要上拉载 ...
随机推荐
- 如何安装 JAVA 7 (JDK 7u75) 在 CentOS/RHEL 7/6/5 Fedora
先下载JDK For 64 Bit:- # cd /opt/ # wget --no-cookies --no-check-certificate --header "Cookie: gpw ...
- 【转】C#异步编程及其同步机制
C#异步编程及其同步机制 本篇文章涵盖一下几部分内容: 1. 什么是异步编程,为什么会需要异步编程 2. .NET下的异步编程及其发展 3. .NET线程同步机制及线程间数据封送 4. 异步模式 5. ...
- (转)每天一个linux命令（46）：vmstat命令
vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...
- [javascript｜基本概念｜Underfined]学习笔记
Underfined类型的值:underfined(只有一个) 1/声明未初始化 e.g.:var msg;-->msg == underfined:true 2/申明并值初始化为underfi ...
- 《asp.net mvc实战》笔记
对于大部分复杂的项目来说,可能不会在Models文件夹中放置你的模型.一般来说,最好的方法是将你的领域模型放在独立的项目中.这样其他应用程序可以在使用该项目而不必依赖于你的MVC应用程序.我们建议你只 ...
- 通过Javascript数组设计一个省市联动菜单
通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...
- cass实体编码列表
地物名称 编码 图层 类别 参数一 参数二 实体类型 三角点 131100 KZD 20 gc113 3 SPECIAL,1 三角点分数线 131110 KZD 附 LINE 三角点高程注记 1311 ...
- 修改 timezone
1.通过命令修改 1.Set Time, Date Timezone in Linux from Command Line or Gnome | Use ntp 2.Use TZ database 3 ...
- 探索VS中C++多态实现原理
引言 最近把<深度探索c++对象模型>读了几遍,收获甚大.明白了很多以前知其然却不知其所以然的姿势.比如构造函数与拷贝构造函数什么时候被编译器合成,虚函数.实例函数.类函数的区别等等.在此 ...
- iOS开发笔记－两种单例模式的写法
iOS开发笔记-两种单例模式的写法 单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h" ...