使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)


Posted in Javascript onMay 06, 2014

PC 移动端兼容  IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹

门面模式

window.onload = function() {
 /*测试数据*/
 var insert = '';
 for (var i = 0; i < 80; i++) {
  insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '</div>';
 }
 document.getElementById("moveArea").innerHTML = insert;
 /*测试数据   */
 var at = new appTouch({
  tContain : 'appArea', //必选:滑动区域id
  tMove : 'moveArea', //必选:移动区域id
  tScroller : 'scroller', //必选:自定义滚动条
  tScrollerArea : 'scrollerArea'//必选:滚动条区域
 }, onmoveend);
 //到顶/底回调
 function onmoveend(m) {
  //console.log(m);
 }
}
/*=====================
 * 名称: appTouch
 * 功能: web app滑动模拟组件
 * 参数: 相关配置
 ======================*/
var appTouch = function(config, callback) {
 this.touchContain = config.tContain;
 this.touchMove = config.tMove;
 this.touchScroller = config.tScroller;
 this.touchScrollerArea = config.tScrollerArea;
 this.callbackfn = callback;
 this.move();
}
appTouch.prototype = {
 move : function(e) {
  var monitor = document.getElementById(this.touchContain), //监听容器
  target = document.getElementById(this.touchMove), //移动目标
  scroller = document.getElementById(this.touchScroller), //自定义滚动条
  scrollerArea = document.getElementById(this.touchScrollerArea), //滚动条区域
  sheight = monitor.offsetHeight / target.offsetHeight * monitor.offsetHeight, //自定义滚动条的长度
  st = (target.offsetHeight - monitor.offsetHeight) / (monitor.offsetHeight - sheight), //移动块对应滚轮单位长度
  tslow = 4, //到顶/底减基数
  tMove = 0, //滑块到顶top值
  tMoveL = tMove + 140, //到顶允许下拉范围
  bMove = monitor.offsetHeight - target.offsetHeight, //滑块到底top值
  bMoveL = bMove - 140, //到底允许上滑范围
  callbackfn = this.callbackfn, //回调函数
  flg = false, //标记是否滑动
  startY, //标记起始位置
  startTop, //标记滑动起始时的高度值
  move = 0;
  //移动距离
  //鼠标事件注册
  addEvent(monitor, 'mousedown', moveStart);
  addEvent(monitor, 'mousemove', moveIn);
  addEvent(monitor, 'mouseup', moveEnd);
  addEvent(window, 'mousemove', moveIn);
  addEvent(window, 'mouseup', moveEnd);
  //移动设备触摸事件注册
  addEvent(monitor, 'touchstart', moveStart);
  addEvent(monitor, 'touchmove', moveIn);
  addEvent(monitor, 'touchend', moveEnd);
  /**
   *外观/门面模式包装
   */
  /*事件监听 */
  function addEvent(el, type, fn) {
   if (el.addEventListener) {
    el.addEventListener(type, fn, false);
   } else if (el.attachEvent) {
    el.attachEvent('on' + type, fn);
   } else {
    el['on' + type] = fn;
   }
  }
  //取消浏览器默认行为
  function stop(e) {
   //Opera/Chrome/FF
   if (e.preventDefault)
    e.preventDefault();
   //IE
   e.returnValue = false;
  }
  //包装结束
  /**
   *操作函数
   */
  //惯性缓动参数
  var lastMoveTime = 0;
  var lastMoveStart = 0;
  var stopInertiaMove = false;
  /*移动触发*/
  function moveStart(e) {
   stop(e);
   flg = true;
   if (e.touches)
    e = e.touches[0];
   startY = e.clientY;
   startTop = target.style.top || 0;
   //惯性缓动
   lastMoveStart = startY;
   lastMoveTime = new Date().getTime();
   stopInertiaMove = true;
   scrollerArea.style.visibility = 'visible';
  }
  /*移动过程中*/
  function moveIn(e) {
   if (flg) {
    stop(e);
    if (e.touches)
     e = e.touches[0];
    move = e.clientY - startY + parseInt(startTop);
    if (move > tMove) {
     (move - tMove) / tslow + tMove > tMoveL ? move = tMoveL : move = (move - tMove) / tslow + tMove
    } else if (move < bMove)
     (move - bMove) / tslow + bMove < bMoveL ? move = bMoveL : move = (move - bMove) / tslow + bMove;
    target.style.top = move + 'px';
    scroller.style.top = -move / st + 'px';
    //惯性缓动
    var nowTime = new Date().getTime();
    stopInertiaMove = true;
    if (nowTime - lastMoveTime > 300) {
     lastMoveTime = nowTime;
     lastMoveStart = e.clientY;
    }
   }
  }
  /*移动结束*/
  function moveEnd(e) {
   stop(e);
   if (e.touches)
    e = e.touches[0];
   //惯性缓动
   var contentTop = target.style.top.replace('px', '');
   var contentY = (parseInt(contentTop) + e.clientY - lastMoveStart);
   var nowTime = new Date().getTime();
   var v = (e.clientY - lastMoveStart) / (nowTime - lastMoveTime);
   //最后一段时间手指划动速度
   stopInertiaMove = false;
   (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1;
    //加速度方向
    var deceleration = dir * 0.005;
    function inertiaMove() {
     if (stopInertiaMove)
      return;
     var nowTime = new Date().getTime();
     var t = nowTime - startTime;
     var nowV = v + t * deceleration;
     var moveY = (v + nowV) / 2 * t;
     // 速度方向变化表示速度达到0了
     if (dir * nowV > 0) {
      if (move > tMove) {
       callbackfn('到顶了');
       target.style.top = tMove + 'px';
       scroller.style.top = tMove + 'px';
      } else if (move < bMove) {
       callbackfn('到底了');
       target.style.top = bMove + 'px';
       scroller.style.top = -bMove / st + 'px';
      }
      setTimeout(function() {
       if (!stopInertiaMove)
        scrollerArea.style.visibility = 'hidden';
      }, 4000);
      return;
     }
     move = contentY + moveY;
     if (move > tMove) {
      t /= 20;
      move = (move - tMove) / 10 + tMove;
     } else if (move < bMove) {
      t /= 20;
      move = (move - bMove) / 10 + bMove;
     }
     target.style.top = move + "px";
     scroller.style.top = -move / st + 'px';
     setTimeout(inertiaMove, 10);
    }
    inertiaMove();
   })(v, nowTime, contentY);
   move = 0;
   flg = false;
  }
  //操作结束
  /**
   *相关初始化
   */
  //滚动条长度初始化
  scroller.style.height = sheight + 'px';
  //初始化结束
 },
 otherInteract : function() {
  //其他功能扩充
 }
}

IE hack css

body,html {background-color:#333; margin: 0; height: 100%; line-height: 2.0; font-family: 'Microsoft YaHei'; overflow-y:hidden;}
#contain{margin: 0 auto; position:relative; width: 100%; max-width: 480px; _width: 480px; height: 100%; cursor: pointer !important;}
#appArea{position: absolute; width: 100%; height: 100%; overflow: hidden;  background-color: #fff;}  
#topInfo{position: absolute;top: 60px;width: 100%; height:60px; text-align: center; font-size: 18px; }
#bottomInfo{position: absolute;bottom: 0;width: 100%;}
#scrollerArea{position: absolute; right: 0; width: 1.5%; height: 100%;visibility: hidden;}
#scroller{position: absolute; top:0; width: 100%;  background-color: #aaa;}
#moveArea{position: absolute; top:0px; width: 100%; background-color: #ddd;}

HTML代码

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <link type="text/css" href="css/main.css" rel="stylesheet">
  <title>滑动回弹</title>
  <!--[if lt IE 9]>      <![endif]-->
  <noscript></noscript>
 </head>
 <body>
  <div id="contain">
   <div id="appArea">
    <div id="topInfo">
     logo or animate
    </div>
    <div id="bottomInfo">
     some imformation  2014-4-28
    </div>
    <div id="moveArea"></div>
    <div id="scrollerArea">
     <div id="scroller"></div>
    </div>
   </div>
  </div>
  <script src="js/main.js"></script>
 </body>
</html>
Javascript 相关文章推荐
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 #Javascript
jQuery中的$.ajax()方法应用
May 06 #Javascript
jquery判断元素是否隐藏的多种方法
May 06 #Javascript
JQuery调用WebServices的方法和4个实例
May 06 #Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 #Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 #Javascript
使用jQuery重置(reset)表单的方法
May 05 #Javascript
You might like
smarty实现多级分类的方法
2014/12/05 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
详解php用static方法的原因
2018/09/12 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
活动策划邀请函
2014/02/06 职场文书
大学生作弊检讨书
2014/02/19 职场文书
婚前财产公证书
2014/04/10 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
公司禁烟通知
2015/04/23 职场文书
董存瑞观后感
2015/06/11 职场文书
部门主管竞聘书
2015/09/15 职场文书