使用原生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() {
/*測(cè)試數(shù)據(jù)*/
var insert = '';
for (var i = 0; i < 80; i++) {
insert += '<div style = "width:100%; text-align:center;">滑動(dòng)測(cè)試 ' + i + '</div>';
}
document.getElementById("moveArea").innerHTML = insert;
/*測(cè)試數(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)塊對(duì)應(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)事件注冊(cè)
addEvent(monitor, 'mousedown', moveStart);
addEvent(monitor, 'mousemove', moveIn);
addEvent(monitor, 'mouseup', moveEnd);
addEvent(window, 'mousemove', moveIn);
addEvent(window, 'mouseup', moveEnd);
//移動(dòng)設(shè)備觸摸事件注冊(cè)
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)文章
既然JQ和JS都能實(shí)現(xiàn)那么炫酷的效果，我們用CSS3能不能做出手風(fēng)琴效果的書簽來呢？這篇文章主要為大家分享了炫酷的手風(fēng)琴效果實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-10-10
聊聊那些使用前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫
本文介紹了前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JS中怎樣判斷undefined(比較不錯(cuò)的方法)
用servlet賦值給html頁面文本框值后,用alert來彈出這個(gè)值.結(jié)果顯示"undefined".下面為大家介紹下具體的判斷方法，大家可以參考下2014-03-03
JS時(shí)間戳與日期格式的轉(zhuǎn)換小結(jié)
這篇文章主要介紹了JS時(shí)間戳與日期格式的轉(zhuǎn)換小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Bootstrap教程JS插件彈出框?qū)W習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件彈出框?qū)W習(xí)筆記，為大家詳細(xì)介紹Bootstrap彈出框的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01
javascript實(shí)現(xiàn)搶購倒計(jì)時(shí)程序
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)搶購倒計(jì)時(shí)程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
javascript iframe內(nèi)的函數(shù)調(diào)用實(shí)現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù)，實(shí)現(xiàn)一些比較特殊的效果，不過能跨域的。2009-07-07
大家都習(xí)慣了重載帶來的便利。JavaScript有沒有重載呢？有人會(huì)回答沒有，因?yàn)楹瘮?shù)會(huì)被覆蓋；有人說有，我們可以模擬重載這 一操作。2010-07-07
js獲取url參數(shù)值的方法有很多，下面也為大家介紹兩種，喜歡的朋友可以測(cè)試下，希望對(duì)大家有所幫助2013-09-09