Preface
existPrevious articleIn this article, we used the tween algorithm to achieve the ease-out movement effect. In fact, the simpler method is to use css3's transition animation. I won't say much below, let's take a look at the detailed introduction together.
Core points:
When we move a distance through code, use transition animation; when we move our fingers, do not use transition animation.
The carousel diagram of the animation effect implemented using transition is less than 100 lines of
~function () {
var lastPX = 0; // The x-coordinate of the position of the last touch needs to be calculated every time the finger moves. var movex = 0; // Record the x-direction value of finger move var imgWrap = ('imgWrap');
var startX = 0; // The x coordinate where your finger is located when you start touching var endX = 0; // The x-coordinate position of the finger at the end of the touch var imgSize = - 2; // Number of pictures var t1 = 0; // Record the moment when you start touching var t2 = 0; // Record the time when the touch is finished var width = ; // Current window width var nodeList = ('#imgWrap img'); // All carousel graph node array NodeList
// Set the appropriate left value for the image, note that querySelectorAll returns NodeList, with the forEach method (function (node, index) {
= (index - 1) * width + 'px';
});
/**
* Move the picture to the current tIndex index location
* @param {number} tIndex Index of the image to be displayed
* */
function toIndex(tIndex) {
var dis = -(tIndex * width);
// Animation move = 'translate3d(' + dis + 'px, 0, 0)';
= 'transform .2s ease-out';
movex = dis;
// Index to the last picture, quickly switch the index to the initial position of the same picture setTimeout(function () {
if (tIndex === imgSize) {
= 'translate3d(0, 0, 0)';
= 'none';
movex = 0;
}
if (tIndex === -1) {
= 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)';
= 'none';
movex = -width * (imgSize - 1);
}
}, 200);
}
/**
* Handle various touch events, including touchstart, touchend, touchmove, touchcancel
* @param {Event} evt js event object passed back in the callback function
* */
function touch(evt) {
var touch = [0];
var tar = ;
var index = parseInt(('data-index'));
if ( === 'touchmove') {
var di = parseInt( - lastPX);
endX = ;
movex += di;
= 'translate3d(' + movex + 'px, 0, 0)';
= 'none'; // Avoid animation delay when moving lastPX = ;
}
if ( === 'touchend') {
var minus = endX - startX;
t2 = new Date().getTime() - t1;
if ((minus) > 0) { // There is a drag operation if ((minus) < width * 0.4 && t2 > 500) { // If the drag distance is not enough, return! toIndex(index);
} else { // More than half, look at the direction (minus);
if ((minus) < 20) {
('The distance is very short' + minus);
toIndex(index);
return;
}
if (minus < 0) { // endX < startX, swipe to the left, it is the next one toIndex(index + 1)
} else { // endX > startX , swipe to the right, it is the previous one toIndex(index - 1)
}
}
} else { //No drag operation
}
}
if ( === 'touchstart') {
lastPX = ;
startX = lastPX;
endX = startX;
t1 = new Date().getTime();
}
return false;
}
('touchstart', touch, false);
('touchmove', touch, false);
('touchend', touch, false);
('touchcancel', touch, false);
}();
Notes:
When switching to a graph with boundary value, you should wait until the animation effect is switched to the position of the same graph content.
So: We use setTimeout to delay the operation of replacing the position of the graph
As for css and html, it is still the original recipe and the original taste~ See this article:https:///article/
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.