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 Validate 校验多个相同name的方法
May 18 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现简单评论功能
Aug 19 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者的疑难问答(1)
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
多个应用共存的Django配置方法
2018/05/30 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python制作抖音代码舞
2019/04/07 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
高中生的自我评价
2014/03/04 职场文书
应聘会计求职信
2014/06/11 职场文书
单位授权委托书范文
2014/08/02 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
中学生逃课检讨书
2015/02/17 职场文书
交通事故代理词范文
2015/05/23 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android