JS + HTML5 mobile development-Implementation Method Analysis of Rolling and inertial easing

This article mainly introduces the implementation of rolling and inertial easing in JS + HTML5 Mobile Phone development. It involves the movement skills of javascript to control page elements based on HTML5 features and has some reference value, for more information about JS + HTML5 mobile development, see the following example. We will share this with you for your reference. The details are as follows:

1. Scroll the following three implementation methods:

1) use the native css Attribute overflow: scroll p id = parent style = overflow: scroll; pid = 'content' content area/p Notice: There is a bug in android, after scrolling, it will be rolled back to the top content area. The solution is to use the last two methods.

2) js Programming Implementation ideas: Compare the changes in the front and back positions of fingers on the screen to change the content Element content

1. Scroll

There are three implementation methods:

1) use the native css Attribute overflow: scroll

var parent = document.getElementById('parent');parent.addEventListener('touchstart', function(e) {  // do touchstart});parent.addEventListener('touchmove', function(e) {  // do touchmove});parent.addEventListener('touchend', function(e) {  // do touchend});
Step 3: Implement rolling code
/*** Only vertical scrolling is implemented here */var parent = document. getElementById ('parent'); var content = document. getElementById ('content') var startY = 0; // initial position var lastY = 0; // last position parent. addEventListener ('touchstart', function (e) {lastY = startY = e. touches [0]. pageY;}); parent. addEventListener ('touchmove ', function (e) {var nowY = e. touches [0]. pageY; var moveY = nowY-lastY; var contentTop = content. style. top. replace ('px ', ''); // set the top value to move content. style. top = (parseInt (contentTop) + moveY) + 'px '; lastY = nowY;}); parent. addEventListener ('touchend', function (e) {// do touchend var nowY = e. touches [0]. pageY; var moveY = nowY-lastY; var contentTop = content. style. top. replace ('px ', ''); // set the top value to move content. style. top = (parseInt (contentTop) + moveY) + 'px '; lastY = nowY ;});
Step 4: Optimization
The above code runs on a mobile phone, which requires a lot of cards compared to the PC.
For the optimization section, see:
3) use the iScroll4 framework
var scroll = new iScroll('parent', {hScrollbar: false,vScrollbar: true,checkDOMChanges : true});
Official framework Website :#
2. Inertia easing
Idea: Take the average speed v of the last part of the finger on the screen, and let v change according to a decreasing function until it cannot be moved or v <= 0
/*** Only vertical scrolling is implemented here */var parent = document. getElementById ('parent'); var content = document. getElementById ('content') var startY = 0; // The initial position var lastY = 0; // last position/*** variable used for easing */var lastMoveTime = 0; var lastMoveStart = 0; var stopInertiaMove = false; // whether to stop easing the parent. addEventListener ('touchstart', function (e) {lastY = startY = e. touches [0]. pageY;/*** slow Code */lastMoveStart = lastY; lastMoveTime = e. ti MeStamp | Date. now (); stopInertiaMove = true;}); parent. addEventListener ('touchmove ', function (e) {var nowY = e. touches [0]. pageY; var moveY = nowY-lastY; var contentTop = content. style. top. replace ('px ', ''); // set the top value to move content. style. top = (parseInt (contentTop) + moveY) + 'px '; lastY = nowY;/*** slow Code */var nowTime = e. timeStamp | Date. now (); stopInertiaMove = true; if (nowTime-lastM OveTime> 300) {lastMoveTime = nowTime; lastMoveStart = nowY ;}}); parent. addEventListener ('touchend', function (e) {// do touchend var nowY = e. touches [0]. pageY; var moveY = nowY-lastY; var contentTop = content. style. top. replace ('px ', ''); var contentY = (parseInt (contentTop) + moveY); // set the top value to move the content. style. top = contentY + 'px '; lastY = nowY;/*** slow Code */var nowTime = e. timeStamp | Date. now (); var v = (nowY-lastMoveStart)/(nowTime-lastMoveTime); // finger stroke speed in the last period: stopInertiaMove = false; (function (v, startTime, contentY) {var dir = v> 0? -1: 1; // var deceleration = dir * 0.0006 In the acceleration direction; var duration = v/deceleration; // time required for speed reduction to 0 var dist = v * duration/2; // how much function inertiaMove () {if (stopInertiaMove) return; var nowTime = e. timeStamp | Date. now (); var t = nowTime-startTime; var nowV = v + t * deceleration; // if (dir * nowV <0) {return;} var moveY = (v + nowV)/2 * t; content. style. top = (contentY + moveY) + "px"; setTimeout (inertiaMove, 10);} inertiaMove () ;}) (v, nowTime, contentY );});
I hope this article will help you with jQuery programming.
For more articles on JS + HTML5 Mobile Phone development-rolling and inertial easing implementation methods, refer to PHP Chinese network!