PC mobile terminal is compatible with IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ inertia assist, sliding rebound
Facade mode
The code copy is as follows:
window.onload = function() {
/*Test data*/
var insert = '';
for (var i = 0; i < 80; i++) {
insert += '<div style = "width:100%; text-align:center;">Sliding test' + i + '</div>';
}
document.getElementById("moveArea").innerHTML = insert;
/*Test data*/
var at = new appTouch({
tContain: 'appArea', //Required: Sliding area id
tMove: 'moveArea', //Required: Move Area id
tScroller: 'scroller', //Required: Custom scrollbar
tScrollerArea: 'scrollerArea'//Required: scrollbar area
}, onmoveend);
//To the top/bottom callback
function onmoveend(m) {
//console.log(m);
}
}
/*=============================================================================================================================
* Name: appTouch
* Function: web app sliding simulation component
* Parameters: Related configurations
==============================*/
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), //listenergy container
target = document.getElementById(this.touchMove), //Move the target
scroller = document.getElementById(this.touchScroller), //Custom scrollbar
scrollerArea = document.getElementById(this.touchScrollerArea), //Scroller area
sheight = monitor.offsetHeight / target.offsetHeight * monitor.offsetHeight, //Customize the length of the scrollbar
st = (target.offsetHeight - monitor.offsetHeight) / (monitor.offsetHeight - sheight), //Move block corresponding to the unit length of the roller
tslow = 4, //To top/bottom minus base
tMove = 0, //Slider to top value
tMoveL = tMove + 140, //The drop-down range is allowed to top
bMove = monitor.offsetHeight - target.offsetHeight, //The top value of the slider
bMoveL = bMove - 140, //Absolutely upsliding range
callbackfn = this.callbackfn, //Callback function
flg = false, // Whether the marker is sliding
startY, // Mark the starting position
startTop, // Mark the height value at the start of sliding
move = 0;
//Movement distance
//Mouse event registration
addEvent(monitor, 'mousedown', moveStart);
addEvent(monitor, 'mousemove', moveIn);
addEvent(monitor, 'mouseup', moveEnd);
addEvent(window, 'mousemove', moveIn);
addEvent(window, 'mouseup', moveEnd);
//Mobile device touch event registration
addEvent(monitor, 'touchstart', moveStart);
addEvent(monitor, 'touchmove', moveIn);
addEvent(monitor, 'touchend', moveEnd);
/**
*Appearance/Farework Mode Packaging
*/
/*Event Listening*/
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;
}
}
//Cancel the browser's default behavior
function stop(e) {
//Opera/Chrome/FF
if (e.preventDefault)
e.preventDefault();
//IE
e.returnValue = false;
}
//The packaging ends
/**
*Operation function
*/
//Inertial easing parameters
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false;
/*Mobile trigger*/
function moveStart(e) {
stop(e);
flg = true;
if (e.touches)
e = e.touches[0];
startY = e.clientY;
startTop = target.style.top || 0;
//Inertial slow
lastMoveStart = startY;
lastMoveTime = new Date().getTime();
stopInertiaMove = true;
scrollerArea.style.visibility = 'visible';
}
/*During the movement*/
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';
//Inertial slow
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = e.clientY;
}
}
}
/*Move end*/
function moveEnd(e) {
stop(e);
if (e.touches)
e = e.touches[0];
//Inertial slow
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);
//The fingers are slashing at the last period of time
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//Acceleration direction
var decision = 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;
// Change in speed direction means that the speed has reached 0
if (dir * nowV > 0) {
if (move > tMove) {
callbackfn('top');
target.style.top = tMove + 'px';
scroller.style.top = tMove + 'px';
} else if (move < bMove) {
callbackfn('Then it');
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;
}
//The operation ends
/**
*Related initialization
*/
//Scroll bar length initialization
scroller.style.height = sheight + 'px';
//Initialization ends
},
otherInteract : function() {
//Other functions are expanded
}
}
IE hack css
The code copy is as follows:
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 code
The code copy is as follows:
<!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>Sliding rebound</title>
<!--[if lt IE 9]> <![endif]-->
<noscript></noscript>
</head>
<body>
<div id="contain">
<div id="appArea">
<div id="topInfo">
logo or animation
</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>