使用原生js封裝webapp滑動(dòng)效果(慣性滑動(dòng)、滑動(dòng)回彈)
PC 移動(dòng)端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 慣性助動(dòng)，滑動(dòng)回彈
門面模式
window.onload = function() {
/*測試數(shù)據(jù)*/
var insert = '';
for (var i = 0; i < 80; i++) {
insert += '<div style = "width:100%; text-align:center;">滑動(dòng)測試 ' + i + '</div>';
}
document.getElementById("moveArea").innerHTML = insert;
/*測試數(shù)據(jù) */
var at = new appTouch({
tContain : 'appArea', //必選：滑動(dòng)區(qū)域id
tMove : 'moveArea', //必選：移動(dòng)區(qū)域id
tScroller : 'scroller', //必選：自定義滾動(dòng)條
tScrollerArea : 'scrollerArea'//必選：滾動(dòng)條區(qū)域
}, onmoveend);
//到頂/底回調(diào)
function onmoveend(m) {
//console.log(m);
}
}
/*=====================
* 名稱: appTouch
* 功能: web app滑動(dòng)模擬組件
* 參數(shù): 相關(guān)配置
======================*/
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), //監(jiān)聽容器
target = document.getElementById(this.touchMove), //移動(dòng)目標(biāo)
scroller = document.getElementById(this.touchScroller), //自定義滾動(dòng)條
scrollerArea = document.getElementById(this.touchScrollerArea), //滾動(dòng)條區(qū)域
sheight = monitor.offsetHeight / target.offsetHeight * monitor.offsetHeight, //自定義滾動(dòng)條的長度
st = (target.offsetHeight - monitor.offsetHeight) / (monitor.offsetHeight - sheight), //移動(dòng)塊對應(yīng)滾輪單位長度
tslow = 4, //到頂/底減基數(shù)
tMove = 0, //滑塊到頂top值
tMoveL = tMove + 140, //到頂允許下拉范圍
bMove = monitor.offsetHeight - target.offsetHeight, //滑塊到底top值
bMoveL = bMove - 140, //到底允許上滑范圍
callbackfn = this.callbackfn, //回調(diào)函數(shù)
flg = false, //標(biāo)記是否滑動(dòng)
startY, //標(biāo)記起始位置
startTop, //標(biāo)記滑動(dòng)起始時(shí)的高度值
move = 0;
//移動(dòng)距離
//鼠標(biāo)事件注冊
addEvent(monitor, 'mousedown', moveStart);
addEvent(monitor, 'mousemove', moveIn);
addEvent(monitor, 'mouseup', moveEnd);
addEvent(window, 'mousemove', moveIn);
addEvent(window, 'mouseup', moveEnd);
//移動(dòng)設(shè)備觸摸事件注冊
addEvent(monitor, 'touchstart', moveStart);
addEvent(monitor, 'touchmove', moveIn);
addEvent(monitor, 'touchend', moveEnd);
/**
*外觀/門面模式包裝
*/
/*事件監(jiān)聽 */
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;
}
}
//取消瀏覽器默認(rèn)行為
function stop(e) {
//Opera/Chrome/FF
if (e.preventDefault)
e.preventDefault();
//IE
e.returnValue = false;
}
//包裝結(jié)束
/**
*操作函數(shù)
*/
//慣性緩動(dòng)參數(shù)
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false;
/*移動(dòng)觸發(fā)*/
function moveStart(e) {
stop(e);
flg = true;
if (e.touches)
e = e.touches[0];
startY = e.clientY;
startTop = target.style.top || 0;
//慣性緩動(dòng)
lastMoveStart = startY;
lastMoveTime = new Date().getTime();
stopInertiaMove = true;
scrollerArea.style.visibility = 'visible';
}
/*移動(dòng)過程中*/
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';
//慣性緩動(dòng)
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = e.clientY;
}
}
}
/*移動(dòng)結(jié)束*/
function moveEnd(e) {
stop(e);
if (e.touches)
e = e.touches[0];
//慣性緩動(dòng)
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);
//最后一段時(shí)間手指劃動(dòng)速度
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;
// 速度方向變化表示速度達(dá)到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;
}
//操作結(jié)束
/**
*相關(guān)初始化
*/
//滾動(dòng)條長度初始化
scroller.style.height = sheight + 'px';
//初始化結(jié)束
},
otherInteract : function() {
//其他功能擴(kuò)充
}
}
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>滑動(dòng)回彈</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>
相關(guān)文章
本篇文章主要介紹了JS函數(shù)節(jié)流防抖，函數(shù)節(jié)流和函數(shù)防抖為了解決類似需求應(yīng)運(yùn)而生的，有興趣的可以了解一下2017-10-10
JavaScript利用正則表達(dá)式替換字符串中的內(nèi)容
本文主要介紹了JavaScript利用正則表達(dá)式替換字符串中內(nèi)容的具體實(shí)現(xiàn)方法，并做了簡要注釋，便于理解。具有一定的參考價(jià)值，需要的朋友可以看下2016-12-12
寫出更好的JavaScript程序之undefined篇（中）
前一篇我介紹了幾種廣為使用的利用undefined這個(gè)概念值的辦法，這一篇我會(huì)介紹一些不太常見的辦法，其中還包括一個(gè)很巧妙的，我個(gè)人覺得很值得推廣的辦法。2009-11-11
js時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)
下面小編就為大家?guī)硪黄猨s時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法
這篇文章主要介紹了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法,涉及針對javascript加載順序的調(diào)整,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS使用onerror捕獲異常的方法,結(jié)合實(shí)例形式分析了javascript基于onerror事件處理器捕獲異常的具體流程與相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
使用正則替換變量...2007-05-05
這篇文章主要介紹使用js模擬一個(gè)類似百度google的模糊搜索下拉列表,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了js由下向上不斷上升冒氣泡效果,實(shí)例分析了javascript操作鼠標(biāo)事件、圖片及樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)，它們是JavaScript中提供了兩種方式迭代對象，本文就和大家一起學(xué)習(xí)for循環(huán)和for...in循環(huán)，感興趣的小伙伴們可以參考一下2015-11-11