JS réalise une navigation en plein écran des images avec un balayage illimité

　Stratégie de chargement infini

Comme il s'agit d'un balayage infini, il n'est pas possible d'obtenir toutes les images chargé en même temps car il doit y avoir un effet Scratching, donc les côtés gauche et droit de l'image actuelle doivent être préchargés. Par conséquent, vous pouvez utiliser trois images comme fenêtre et utiliser la stratégie de rotation pour obtenir une liste de balayage infinie.

<p class="lightbox">
  <p class="container">
    <p class="lightbox-item prev"></p>
    <p class="lightbox-item current"></p>
    <p class="lightbox-item next"></p>
  </p>
</p>　

　La disposition plein écran .lightbox, l'élément .lightbox comprend les images précédentes, actuelles et suivantes. Chaque fois que l'image est glissée, nous changeons l'image suivante en image précédente, l'image actuelle en image précédente, l'image précédente d'origine en image suivante et préchargeons la ressource d'image suivante.

Notez qu'une couche supplémentaire de .container est ajoutée ici et enveloppe toutes les images. De cette façon, lorsque nous avons besoin que l'image glisse dans son ensemble, nous pouvons l'animer.

Style de mise en page

Nous réglons le .lightbox en plein écran, mettons .prev à gauche du courant écran, et .à côté à droite.

.lightbox, .container .lightbox-item{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #000;
}
.container{
    position: absolute;
}
.lightbox-item{
    /* 我们用背景图来显示图片 */
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.lightbox-item.prev{
    left: -100%;
    right: 100%;
}
.lightbox-item.next{
    left: 100%;
    right: -100%;
}

Sous certains navigateurs (comme un certain navigateur intégré Samsung), on constatera que le contenu de la page est en réalité trois fois plus large que la page. La page a donc été élargie pour que les trois images soient affichées. Le réglage du débordement peut résoudre ce problème :

.lightbox{
    overflow: hidden;
}

Liaison des événements tactiles

La clé de l'effet de balayage d'image Il réside dans l'événement tactile de l'utilisateur. Puisqu'il s'agit d'une navigation en plein écran, il peut être directement lié à la fenêtre. Mais lors de la liaison à une fenêtre, nous devons faire attention aux conflits et aux problèmes de liaison. Vous pouvez désactiver la fonction que vous avez enregistrée, ou vous pouvez ajouter un espace de noms, par exemple :

$(window)
    .on('mouseup.lightbox touchend.lightbox', onTouchEnd)
    .on('mousemove.lightbox touchmove.lightbox', onTouchMove)
    .on('mousedown.lightbox touchstart.lightbox', onTouchBegin)
$(window)
    .off('mouseup.lightbox touchend.lightbox')
    .off('mousemove.lightbox touchmove.lightbox')
    .off('mousedown.lightbox touchstart.lightbox')

<🎜. > Ici, il y a 6 événements clés, à savoir :

• mousedown, mousemove, mouseup : appuyez sur la souris, bougez et détendez-vous <🎜 >

• 　touchbegin, touchmove, touchend : touchez, appuyez, bougez et partez.

Animation de glissement d'image

En fait, l'image n'est pas animée comme le doigt se déplace, il suffit de mettre à jour sa position lorsque vous touchez le mouvement.

　

// 起始位置，划动距离
var beginX, translateX;
function onTouchBegin(e){
    beginX = getCursorX(e);
}
function getCursorX(e) {
    // 如果是鼠标事件
    if (['mousemove', 'mousedown'].indexOf(e.type) > -1) {
        return e.pageX;
    }
    // 如果是触摸事件
    return e.changedTouches[0].pageX;
}
function onTouchMove(e){
    translateX = getCursorX(e) - beginX;
    $('.container')
        .attr('transform:translate3d(' + translateX + ')');
        .attr('-webkit-transform:translate3d(' + translateX + ')');
}

　 La transformation -webkit ici est destinée à la compatibilité avec le navigateur Android UC, et tout le reste semble être OK. Notez également que Translate3d permet l'accélération matérielle, contrairement à TranslateX. Par conséquent, les performances de TranslateX dans les navigateurs Android ordinaires sont très médiocres.

Lorsque je rencontre des problèmes de compatibilité, j'ai vraiment envie de parler de l'UC de Tiansha. Mais ensuite j'y ai réfléchi, au moins il n'est pas nécessaire qu'il soit compatible avec IE6, et je n'ai pas trop à me plaindre.

Détermination de la cible glissante

Il manque toujours un onTouchEnd dans le code ci-dessus, c'est-à-dire que l'utilisateur lâchera prise après avoir parcouru une certaine distance, que se passe-t-il ? Si la distance de balayage est suffisamment grande, continuez l'animation et passez à l'image suivante, sinon revenez à la position d'origine. Dans le même temps, la vitesse de balayage doit également être détectée. Si la distance est courte mais la vitesse est très grande, la commutation d'image doit également être effectuée.

N'avons-nous jamais pris en compte les détails ici lorsque nous glissons habituellement des images

Enregistrez l'heure de début dans onTouchBegin et dans onTouchEnd qui est calculable ? vitesse.

var beginTime, endTime;
function onTouchBegin(e){
    beginTime = Date.now();
}
function onTouchEnd(e){
    endTime = Date.now();
    animateTo(getTarget());
}

Ici, getTarget() est utilisé pour calculer l'image à glisser, tandis que animateTo appelle une animation de balayage.

　[Code]code php :

function getTarget(){
    // 首先检测划动距离，返回 -1, 0, 1 表示上一张，当前，下一张
    var direction = getDirection(translateX, 0.3 * $(window).width());
    // 如果划动距离检测为0，继续检测速度
    if (direction === 0) {
        var deltaT = Math.max(endTime - beginTime, 1);
        var v = translateX / deltaT;
        direction = getDirection(v, 0.3);
    }
    return ['.prev', '.current', '.next'][direction + 1];
}
function getDirection(offset, max) {
    if (offset > max) return -1;
    if (offset < -max) return 1;
    return 0;
}

Animation après la fin du trait

Une fois le balayage terminé, nous devons faire glisser le .container vers l'image cible. Afin d'éviter de remplacer brusquement l'image actuelle par l'image cible, nous définissons l'animation de transformation sur la position cible, puis la remplaçons silencieusement. Voici la logique principale d'animateTo :

// 计算划动到的目标图片对应的translateX
var translateX = $(window).width() * (1 - idx);
$('.container').animate({
    'transform': 'translate3d(' + translateX + 'px, 0px, 0px)'
    '-webkit-transform': 'translate3d(' + translateX + 'px, 0px, 0px)'
}, {
    duration: 1000,
    complete: function() {
        // 动画结束后进行图片轮换
        var $wps = $('.container').find('.lightbox-item');
        var $prev = $wps.filter('.prev');
        var $curr = $wps.filter('.current');
        var $next = $wps.filter('.next');
        if (target === '.prev') {
            idx--;
            $prev.attr('class', 'lightbox-item current');
            $curr.attr('class', 'lightbox-item next');
            $next.attr('class', 'lightbox-item prev');
            prefetch('.prev', idx - 1);
        } else if (target === '.next') {
            idx++;
            $next.attr('class', 'lightbox-item current');
            $curr.attr('class', 'lightbox-item prev');
            $prev.attr('class', 'lightbox-item next');
            prefetch('.next', idx + 1);
        }
        $(.container).css('transform', 'none');
        $(.container).css('-webkit-transform', 'none');
    }
});

Vous vous souvenez que nous devons pré-récupérer l'image suivante après l'avoir glissée ? De cette façon, l'image peut défiler en continu. L'opération de prélecture consiste à pré-extraire l'adresse d'image suivante à partir du serveur, puis à remplacer l'image la plus ancienne dans la fenêtre coulissante. Son implémentation spécifique est également liée au serveur, je n’entrerai donc pas dans les détails ici.

　　注意!当动画结束时对.prev,.current,.next进行轮换并重置transform。 如果重置为translate3d(0,0,0)则动画仍会继续，页面就会跳一下。 如果重置为none则会非常平滑，同时别忘了-webkit-transform来兼容更多浏览器。

　　TouchBegin 的兼容性

　　在Android ICS下如果touchbegin和第一个touchmove中都未调用 preventDefault， 后续的touchmove和touchend就不会被触发。 解决办法当然是在onTouchBegin中进行preventDefault()， 然而这样click事件(点击关闭全屏啊!)就不会被触发了：

function onTouchBegin(e) {
    e.preventDefault();
}

　　所以我们需要在onTouchMove中来判断这是否是一个Click，并手动触发它的行为。

function onTouchMove(e){
    if(isClick()) onClick(); 

    function isClick() {
        var deltaT = endTime - beginTime;
        var deltaX = Math.abs(translateX);
        // 时间很短，并且移动距离很小，那么应该是个点击！
        return deltaT < 700 && deltaX < 7;
    }
}

　　图片渐进载入

　　当网速很慢时，连续划动就可能使得旧的图片显示出来(因为预取请求仍未返回)。 常见的一个实践是：立即使用一个已经载入的图片来作为Placeholder， 当目标图片载入后用它替换掉当前的Placeholder。

function loadImage($img, src){
    // 先设置一个Placeholder
    $img.attr('src', 
        'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
    // 载入图片到临时变量
    var tmp = new Image();
    tmp.onload = function(){
        // 资源载入后，将资源显示到目标的img
        $img.src = src;
    };
    tmp.src = src;
}

　　设置背景图与设置src属性一样，均可以使用该策略。浏览器会复用那个资源。

　　图片到底提示

　　在第一张图片右划和最后一张图片左划时，应当给出提示。 可以做一张带有提示信息的Placeholder：

$lightbox.attr('style', 'top:0;left:0;right:0;bottom:0;');
$lightbox.append($(&#39;<p class="alert-nomore">&#39;).html(&#39;没有更多了..&#39;));

　　然后让文字居中：

.lightbox-item .alert-nomore{
    position: absolute;
    text-align: center;
    bottom: 50%;
    left: 0;
    right: 0;
    color: #777;
    font-size: 20px;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!