Javascript 3d investigation-based product display

This article mainly introduces the demonstration of javascript-implemented 3d investigation-based products. For more information, see

The javascript code of 3d object-by-detection image material is as follows: <span style = "white-space: pre"> </span> var step = 0; var first = 0; var lth = document. querySelectorAll ('# tobj img '). length; window. addEventListener ('touchstart', function (e) {e. preventDefault (); first = e. touches [0]. pageX;}) window. addEventListener ('touchmove ', function (e) {e. preventDefault (); var x = e. pageX | e. touches [0]. pageX; document. getElementById ('outs '). innerHTML = step; if (Math. abs (x-first)> 10) {document. querySelectorAll ('# tobj img') [step]. style. display = 'none' if (x <first) {step ++; if (step> = lth-1) {step = 0} else {step -- if (step <= 0) {step = lth-1;} first = x; document. querySelectorAll ('# tobj img') [step]. style. display = 'block'}) window. addEventListener ('touchend', function (e) {e. preventDefault (); step = step;}) The core simplified code is as follows: if (Math. abs (x-first)> 10) {document. querySelectorAll ('# tobj img') [step]. style. display = 'none' if (x <first) {step ++; if (step> = lth-1) {step = 0} else {step -- if (step <= 0) {step = lth-1;} first = x; document. querySelectorAll ('# tobj img') [step]. style. display = 'block '}