webapp滑动效果封装（惯性滑动，滑动反弹）使用原生js
PC移动终端兼容IE 6 +，FF 1.5 +，Safari 2 +，Opera 9 +惯性助推，滑动反弹。外观
复制代码代码如下所示：
在window.onload =函数（）{
测试数据
变量插入=；
对于（var i = 0；i < 80；i + +）{
插入+++滑动测试；
}
document.getelementbyid（movearea ）.innerHTML =插入；
测试数据
在新的apptouch（{ var =
tcontain：'apparea，ID： / /需要滑动区
TMove:'moveArea', ID: / / required moving area
TScroller：'scroller： / /需要自定义滚动条
TScrollerArea：'scrollerarea ' / /：需要滚动区域
}，onmoveend）；
/底部回调
功能onmoveend（M）{
/ / console.log（M）；
}
}
/ * =====================
*名称：apptouch
*功能：Web应用程序滑动模拟组件
*参数：相关配置
====================== * /
无功apptouch =功能（配置，回调）{
this.touchcontain = config.tcontain；
this.touchmove = config.tmove；
this.touchscroller = config.tscroller；
this.touchscrollerarea = config.tscrollerarea；
this.callbackfn =回调；
This.move（）；
}
apptouch.prototype = { {
移动：函数（e）{
VaR监控= document.getelementbyid（这个。touchcontain） / /集装箱监测，
目标= document.getelementbyid（这。touchmove）， / /移动目标
卷轴= document.getelementbyid（这个。touchscroller）， / /自定义滚动条
scrollerarea = document.getelementbyid（这个。touchscrollerarea） / /滚动区，
sheight = monitor.offsetheight * target.offsetheight / / monitor.offsetheight自定义滚动条的长度
ST =（target.offsetheight监控。offsetheight）/（monitor.offsetheight - sheight）， / /移动辊单元长度相应的块
tslow = 4， / / /顶底基还原
安放到= 0，顶 / /顶滑块
tmovel =安放到+ 140 /最高允许压降范围
BMOVE = monitor.offsetheight - target.offsetheight /最大值在端块
bmovel = BMOVE - 140 / /到底允许滑动范围
Callbackfn = this.callbackfn / callback function
FLG =假 /标签滑动
初始位置/标识的起始位置
starttop，标志着开始滑动/高度值
移动= 0；
移动距离
鼠标事件注册
AddEvent（显示器、'mousedown，MoveStart）；
AddEvent（显示器、'mousemove，移动）；
AddEvent（显示器、'mouseup，MoveEnd）；
AddEvent（窗口，'mousemove，移动）；
AddEvent（窗口，'mouseup，MoveEnd）；
触摸移动设备事件注册
AddEvent（显示器、'touchstart，MoveStart）；
AddEvent（显示器、'touchmove，移动）；
AddEvent（显示器、'touchend，MoveEnd）；
*外观/正面模式包装
* /
事件侦听器
函数AddEvent（EL型，FN）{
如果（EL。addEventListener）{
El.addEventListener（型、FN、假）；
如果（EL。attachevent）{ }
El.attachEvent（开+型，FN）；
{人}
埃尔{开+型} = FN；
}
}
取消默认浏览器行为
函数停止（e）{
如果（e.preventDefault）
E.preventDefault（）；
伊江
e.returnvalue = false；
}
包装结束
*操作功能
* /
慢/惯性参数
无功lastmovetime = 0；
无功lastmovestart = 0；
无功stopinertiamove = false；
移动触发器
功能MoveStart（e）{
停止（e）；
FLG =真；
如果（e.touches）
E = e.touches { 0 }；
e.clienty初始位置=；
starttop = target.style.top | | 0；
慢/惯性
lastmovestart =初始位置；
lastmovetime =新的日期（）GetTime（）；
stopinertiamove =真；
scrollerarea.style.visibility = 'visible；
}
在移动的过程中
函数在（e）{
如果（FLG）{
停止（e）；
如果（e.touches）
E = e.touches { 0 }；
移动= e.clienty -初始位置+ parseInt（starttop）；
如果（移动>安放到）{
（移动安放到）/ tslow +安放到> tmovel移动= tmovel：移动=（移动安放到）/ tslow +安放到
别的}如果（移动< BMOVE）
（移动- BMOVE） / tslow + BMOVE < bmovel移动= bmovel：移动=（移动- BMOVE） / tslow + BMOVE；
target.style.top =移动+ 'px；
scroller.style.top =动/ ST + 'px；
慢/惯性
VaR带=新的日期（）GetTime（）；
stopinertiamove =真；
如果（带- lastmovetime > 300）{
lastmovetime =带；
lastmovestart = e.clienty；
}
}
}
移动终端
功能MoveEnd（e）{
停止（e）；
如果（e.touches）
E = e.touches { 0 }；
慢/惯性
无功contenttop = target.style.top.replace（'px '，'）；
Var contentY = (parseInt (contentTop) + e.clientY - lastMoveStart);
VaR带=新的日期（）GetTime（）；
var v =（e.clienty - lastmovestart）/（带- lastmovetime）；
最后一次/滑动速度
stopinertiamove = false；
（功能（V、开始时间、含量）{
var = v * 0-1：1；
/加速度方向
var减速度=目录* 0.005；
功能inertiamove（）{
如果（stopinertiamove）
返回；
VaR带=新的日期（）GetTime（）；
var t =数量-开始时间；
VAR现在= V T *减速；
无功movey =（V +现在）/ 2 * T；
速度变化方向/速度高达0的说
如果（DIR *现在> 0）{
如果（移动>安放到）{
Callbackfn（最重要的）；
target.style.top =安放到+ 'px；
scroller.style.top =安放到+ 'px；
别的}如果（移动< BMOVE）{
Callbackfn（结束）；
target.style.top = BMOVE + 'px；
scroller.style.top = - BMOVE / ST + 'px；
}
setTimeout（）{（）函数（
如果（！stopinertiamove）
scrollerarea.style.visibility =隐藏；
}，4000）；
返回；
}
移动=含量+ movey；
如果（移动>安放到）{
T＝20；
移动=（移动安放到）/ 10 +安放到；
别的}如果（移动< BMOVE）{
T＝20；
移动=（移动- BMOVE）/ 10 + BMOVE；
}
target.style.top =移动+PX；
scroller.style.top =动/ ST + 'px；
setTimeout（inertiamove，10）；
}
InertiaMove（）；
}）（V带，含量）；
移动= 0；
FLG = false；
}
操作结束
*相关的初始化
* /
滚动条的长度
scroller.style.height = sheight + 'px；
初始化结束
}，
otherinteract：函数（）{
其他功能
}
}
IE hack css
复制代码代码如下所示：
身体，html {背景颜色：# 333；保证金：0；身高：100%；线高度：2；字体家庭：'microsoft雅黑；overflow-y：隐藏；}
#含有{ margin: 0 auto；位置：相对；宽度：100%；最大宽度：480px；_width：480px；身高：100%；鼠标指针！重要的；}
# apparea {位置：绝对；宽度：100%；高度：100%；溢出：隐藏；背景颜色：# FFF；}
#图讯{位置：绝对；顶部：60px；宽度：100%；高度：60px；文本对齐：中心；字体大小：18px；}
# bottominfo {位置：绝对的；下：0；宽度：100%；}
# scrollerarea {位置：绝对；右：0；宽度：1.5%；高度：100%；能见度：隐藏；}
#上卷{位置：绝对的；最高：0；宽度：100%；背景颜色：# AAA；}
# movearea {位置：绝对；顶部：0px；宽度：100%；背景颜色：# DDD；}
HTML代码
复制代码代码如下所示：
滑动反弹
标志或动画
一些信息2014-4-28