jQuery实现移动端下拉展现新的内容回弹动画


Posted in jQuery onJune 24, 2020

jQuery移动端下拉展现新的内容动画回弹,供大家参考,具体内容如下

jquery的方法,写的比较细,可以改成原生的这里就不做修改了, 话不多说上代码, 也可以改成下拉刷新

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>顶部回弹</title>
 <style type="text/css">
 html,body,div,h2{ margin: 0;padding: 0;}
 html,body { width: 100%;height: 100%;overflow: hidden; }
 .wrap { width: 100%;height: 100%;overflow: hidden;position: relative; }
 .hideBox { width: 100%;height: 100%;background-color: #f5f5f5;position: absolute;top: 0;left: 0;overflow-y: auto;}
 .hideBox h2 { width: 100%;margin-top: 20%;font-size: 16px;text-align: center; }
 
 .top { width: 100%;height: 100%; position: absolute; top: 0;left: 0;z-index: 2;background-color: #fff;overflow-y: auto;text-align: center;}
 .moveBox {background-color: #1a84dd;color: #fff;width: 100px;height: 100px;text-align: center;line-height: 100px;border-radius: 50%;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;margin: 0 auto;}
 .moveIn { transition: all 1s ease-in; }
 </style>
 </head>
 <body>
 <div class="wrap" >
 <div class="hideBox" >
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2> 
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 <h2>这是隐藏层的内容</h2>
 </div>
 <div class="top" >
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 <div class="moveBox" >移动块</div>
 </div>
 </div>
 </body>
 <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $(function(){
 moveBoxFun($(".top"));
 }) 
 // 移动方法
 function moveBoxFun(dome){
 var startY,endY,intY,
 maxH = $(window).height(),
 maxY = maxH*0.6; // 手指移动的距离
 if(dome){
 
 dome.on('touchstart',function(e){
  var touchS = e.originalEvent.targetTouches[0];
  var startY = touchS.clientY; // 鼠标相对浏览器窗口高度 
  // 获取当前元素scrollTop 
  var scrollTop = dome.scrollTop();
  // 不在顶部禁止
  if(scrollTop !== 0){
  dome.css({top:0});
  dome.unbind('touchmove');
  return;
  }
  // 移动变量
  var moveY = 0;
  
  dome.on('touchmove',function(ev){
  var touchM = ev.originalEvent.targetTouches[0];  
  var mY = touchM.clientY;
  moveY+=2;
  if(mY - startY > 0){  
  dome.css({
  top: moveY+'px'
  })
  }
            // 如果刷新可以改成 window.location.reload()
  })  
  
  dome.on('touchend',function(ev){
  var touchE = ev.originalEvent.changedTouches[0];
  var endY = touchE.clientY;
  dome.unbind('mousemove');
  if(endY - startY >0&& endY - startY > maxY){
  dome.animate({
  top: maxH + 'px'
  },function(){
  dome.hide();
  })
  }else{
  dome.css({
  top:'0px'
  },200)
  }
  });  
 });
 
 }
 }
 
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
You might like
PHP 实用代码收集
2010/01/22 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php内存缓存实现方法
2015/01/24 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
初一英语教学反思
2014/01/11 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
教师年度考核评语
2014/04/28 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
学校运动会简讯
2015/07/20 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
Java的Object类的九种方法
2022/04/13 Java/Android