= function() {
/*Test data*/
var insert = '';
for (var i = 0; i < 80; i++) {
insert += '<div style = "width:100%; text-align:center;">Sliding test ' + i + '</div>';
}
("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);
//Top/bottom callback
function onmoveend(m) {
//(m);
}
}
/*=====================
* Name: appTouch
* Function: web app sliding simulation component
* Parameters: Related configurations
======================*/
var appTouch = function(config, callback) {
= ;
= ;
= ;
= ;
= callback;
();
}
= {
move : function(e) {
var monitor = (), //listenergy container
target = (), //Move the target
scroller = (), //Custom scrollbar
scrollerArea = (), //Scroller area
sheight = / * , //Customize the length of the scrollbar
st = ( - ) / ( - sheight), //Move block corresponds to the unit length of the roller
tslow = 4, //To top/bottom minus base
tMove = 0, //Slider reaches the top value
tMoveL = tMove + 140, //The drop-down range is allowed to top
bMove = - , //The slider is top value
bMoveL = bMove - 140, //Absolutely upsliding range is allowed
callbackfn = , //Callback function
flg = false, //Whether the marker slides
startY, //mark the starting position
startTop, // Mark the height value at the start of sliding
move = 0;
//Moving 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/Fall Mode Packaging
*/
/*Event listening */
function addEvent(el, type, fn) {
if () {
(type, fn, false);
} else if () {
('on' + type, fn);
} else {
el['on' + type] = fn;
}
}
//Cancel the browser's default behavior
function stop(e) {
//Opera/Chrome/FF
if ()
();
//IE
= 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 = [0];
startY = ;
startTop = || 0;
//Inertial slowing
lastMoveStart = startY;
lastMoveTime = new Date().getTime();
stopInertiaMove = true;
= 'visible';
}
/*During the movement*/
function moveIn(e) {
if (flg) {
stop(e);
if ()
e = [0];
move = - 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;
= move + 'px';
= -move / st + 'px';
//Inertial slowing
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = ;
}
}
}
/*Movement end*/
function moveEnd(e) {
stop(e);
if ()
e = [0];
//Inertial slowing
var contentTop = ('px', '');
var contentY = (parseInt(contentTop) + - lastMoveStart);
var nowTime = new Date().getTime();
var v = ( - lastMoveStart) / (nowTime - lastMoveTime);
//The speed of finger strokes during the last period
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//Acceleration direction
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;
// Change in the speed direction means that the speed has reached 0
if (dir * nowV > 0) {
if (move > tMove) {
callbackfn('to the top');
= tMove + 'px';
= tMove + 'px';
} else if (move < bMove) {
callbackfn('The end');
= bMove + 'px';
= -bMove / st + 'px';
}
setTimeout(function() {
if (!stopInertiaMove)
= '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;
}
= move + "px";
= -move / st + 'px';
setTimeout(inertiaMove, 10);
}
inertiaMove();
})(v, nowTime, contentY);
move = 0;
flg = false;
}
//The operation ends
/**
*Related initialization
*/
//Scroll bar length initialization
= sheight + 'px';
//The initialization ends
},
otherInteract : function() {
//Other functions expansion
}
}