使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)
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>
使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)