Javascript3d by-investigation product presentation (simplified core) _ javascript skills-js tutorial

This article describes how to display javascript-implemented 3d object-based detection products. For more information, see 3d object-based detection image materials.

Javascript code

The Code is as follows:

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 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;
})

Simplified Core

The Code is as follows:

If (Math. abs (x-first)> 10 ){
Document. querySelectorAll ('# tobj img') [step]. style. display = 'none'
If (x 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'
}