JS+HTML5 mobile phone development of rolling and inertia of the implementation method analysis _javascript Skills

This paper illustrates the method of rolling and inertia easing of JS+HTML5 mobile phone development. Share to everyone for your reference, specific as follows:

1. The following are three ways to achieve scrolling:

1) using native CSS attributes Overflow:scroll div id= parent style = Overflow:scroll; Divid= ' content ' contents area/div/div Notice: There are bugs on Android, rolling back to the top of the content area, the solution is to use the latter two ways to implement

2 JS Programming Implementation idea: Contrast the finger on the screen before and after the position changes change content element contents

1. Rolling

Here are three ways to implement:

1) using native CSS properties Overflow:scroll

<div id= "Parent" style= "overflow:scroll;>
  <div id= ' content ' > Contents area </div>
</div>

Notice:

There are bugs on Android and you'll fall back to the top content area after scrolling, and the solution is to use the latter two ways

2) JS Programming implementation

Train of thought: change the position of the contents element content by comparing the position of the finger before and after moving on the screen

The first step: Set Parent's overflow to hidden, set content position as relative, top 0;

Step Two: Monitor touch events

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 three: Implement the scrolling code

/**
 * Here only achieve vertical scrolling
/var parent = document.getElementById (' parent ');
var content = document.getElementById (' content ')
var starty = 0;///initial position
var lasty = 0;//Last position
Parent.addeve Ntlistener (' 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 top value move content
  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 top value move content
  Content.style.top = (parseint (contenttop) + Movey) + ' px ';
  Lasty = Nowy;
});

Fourth step: Optimize

The top code runs on the phone with a lot of cards on the PC.

For the tuning section, see:

3 Use ISCROLL4 Framework

var scroll = new Iscroll (' parent ', {
hscrollbar:false,
vscrollbar:true,
checkdomchanges:true
});

Frame Official website: http://cubiq.org/iscroll-4

2. Inertia Slow motion

Train of thought: the average speed of the last time the finger is scratched on the screen V, let v change by a diminishing function until it cannot be moved or v<=0

/** * Here only achieve vertical scrolling/var parent = document.getElementById (' parent '); var content = document.getElementById (' content ') var starty = 0; Initial position var lasty = 0;
Last position/** * variable for easing * * var lastmovetime = 0;
var lastmovestart = 0; var stopinertiamove = false;
  Whether to stop the easing parent.addeventlistener (' Touchstart ', function (e) {lasty = Starty = E.touches[0].pagey;
  /** * Easing code * * Lastmovestart = lasty; Lastmovetime = E.timestamp | |
  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 top value Move content content.style.top = (parseint (contenttop) + Movey) + ' px ';
  Lasty = Nowy; /** * Easing code * * var nowtime = E.timestamp | |
  Date.now ();
  Stopinertiamove = true;
    if (Nowtime-lastmovetime >) {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 top value move content content.style.top = contenty + ' px ';
  Lasty = Nowy; /** * Easing code * * var nowtime = E.timestamp | |
  Date.now (); var v = (nowy-lastmovestart)/(Nowtime-lastmovetime);
  The finger stroke speed Stopinertiamove = False at the last time;
    (function (V, starttime, contenty) {var dir = v > 0 -1:1;//acceleration direction var deceleration = dir*0.0006; var duration = v/deceleration; Speed reduction to 0 time required var dist = v * DURATION/2;
      How many function inertiamove () {if (Stopinertiamove) return is eventually moved; var nowtime = E.timestamp | |
      Date.now ();
      var t = nowtime-starttime;
      var Nowv = v + t*deceleration;
      The velocity direction change indicates that the speed reaches 0 if (DIR*NOWV < 0) {return;
      var Movey = (v + NOWV)/2 * t;
      Content.style.top = (Contenty + movey) + "px"; SetTimeout (Inertiamove,10);
  } inertiamove ();
}) (V, Nowtime, contenty);

 });

PS: Here again for you to recommend a few code formatting, landscaping tools, I believe that we will use in the future development process:

Online JavaScript code Landscaping, formatting tools:
Http://tools.jb51.net/code/js

JavaScript compression/formatting/encryption tool:
http://tools.jb51.net/code/jscompress

JSON code online Format/beautify/compress/edit/Convert tools:
Http://tools.jb51.net/code/jsoncodeformat

Online JSON code inspection, inspection, landscaping, formatting tools:
Http://tools.jb51.net/code/json

More interested readers of jquery-related content can view the site topics: "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery table (table) Operation Tips Summary", "jquery drag and drop effects and tips summary", " jquery Extended Skills Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.