Paramètres de la page Web JavaScript Eslite

Avec le développement rapide d'Internet, les sites de commerce électronique sont devenus l'un des canaux importants permettant aux commerçants de réaliser des ventes en ligne. Dans les sites Web de commerce électronique, la conception et la construction de sites Web de commerce électronique sont très importantes. Un bon site Web peut attirer plus d'utilisateurs, améliorer le taux de conversion des achats des utilisateurs et le taux de fidélisation des utilisateurs. Cet article explique comment utiliser JavaScript pour ajouter des effets spéciaux aux pages Web du site de commerce électronique Vanke Eslite.

Vancl Eslite est une plateforme de commerce électronique de mode unique qui fournit aux jeunes groupes de consommateurs des vêtements, des chaussures, des chapeaux, des accessoires et d'autres produits à la mode. En cette ère de concurrence féroce, outre la qualité des produits eux-mêmes, la conception et l’expérience interactive du site de commerce électronique sont tout aussi essentielles. Par conséquent, nous utilisons les compétences JavaScript pour ajouter des effets spéciaux au site officiel de Vancl Eslite afin d'améliorer l'expérience visuelle et interactive des utilisateurs lors de la visite du site Web.

(1) Effet de glissement de navigation

La barre de navigation est l'un des éléments les plus importants du site Web. Le fait que la barre de navigation soit belle ou non affecte directement le style général du site Web. Nous devons implémenter l'effet coulissant de la barre de navigation via JavaScript pour augmenter la dynamique et la mode du site Web. Les étapes pour obtenir cet effet sont les suivantes :

1. Obtenez l'élément de la barre de navigation

var navElem = document.getElementsByClassName('nav')[0];

var navItems = navElem.getElementsByTagName('li');

var navLine = document.createElement('div');

navLine.className = 'nav-line';

navElem.appendChild(navLine);

2. Ajoutez un événement de déplacement de souris pour l'élément coulissant

navElem.addEventListener('mouseover', function(e) {
    if (e.target.tagName.toLowerCase() === 'li') {
        let rect = e.target.getBoundingClientRect();
        let left = rect.left - navElem.getBoundingClientRect().left - (navLine.offsetWidth - e.target.offsetWidth) / 2;
        navLine.style.left = left + 'px';
    }
});

En obtenant les coordonnées de chaque élément li de la barre de navigation. , modifiez dynamiquement la navLine via JavaScript La valeur de l'attribut gauche est utilisée pour obtenir l'effet coulissant de la barre de navigation.

(2) Effet d'adsorption en haut de la liste des produits

La page d'affichage des produits du site Web peut utiliser l'effet d'adsorption supérieur pour améliorer le confort et l'expérience des utilisateurs parcourant les produits. Les étapes pour obtenir cet effet sont les suivantes :

1. Obtenez l'élément de liste de produits

2. Obtenez la distance depuis le haut de la fenêtre du navigateur

var goodsList = document.getElementById('goods-list');

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var top = goodsList.getBoundingClientRect().top + scrollTop;

3. Ajoutez un événement de défilement à la barre de défilement

window.addEventListener('scroll', function(e) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > top) {
        goodsList.style.position = 'fixed';
        goodsList.style.top = 0;
        goodsList.style.zIndex = 999;
    } else {
        goodsList.style.position = '';
        goodsList.style.top = '';
        goodsList.style.zIndex = 1;
    }
});

. en jugeant la position de la barre de défilement, si la barre de défilement La position est supérieure à la distance du haut de la liste de produits, puis définissez la position de la liste de produits sur fixe pour obtenir l'effet d'adsorption en haut de la liste de produits.

(3) Effet de chargement paresseux à défilement infini

Dans la navigation dans la liste de produits, les utilisateurs doivent parfois faire défiler vers le bas en permanence pour trouver leurs produits préférés. Dans ce cas, l’approche précédente consistait à actualiser automatiquement la page Web ou à cliquer sur le bouton de la page suivante pour basculer, ce qui entraînait une très mauvaise expérience utilisateur. Nous pouvons optimiser cette expérience grâce à des effets de défilement infini et de chargement paresseux.

Les étapes pour obtenir cet effet sont les suivantes :

1. Ajoutez des éléments d'espace réservé au bas de la liste des produits

var placeholder = document.createElement('div');
placeholder.className = 'placeholder';
goodsList.appendChild(placeholder);

2 Chargez plus de données via Ajax

function loadMore() {
    // 加载数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'more-goods-data.json');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var jsonData = JSON.parse(xhr.responseText);
            if (jsonData.status === true) {
                var moreGoodsData = jsonData.moreGoodsData;
                var goodsHtml = '';
                for (var i = 0; i < moreGoodsData.length; i++) {
                    goodsHtml += '<li class="goods-item"><a href=""><img src="' + moreGoodsData[i].imgSrc + '"><h3 class="name">' + moreGoodsData[i].name + '</h3><p class="price">' + moreGoodsData[i].price + '</p></a></li>';
                }
                // 将新加载的数据插入到DOM中
                var placeholder = document.getElementsByClassName('placeholder')[0];
                placeholder.insertAdjacentHTML('beforebegin', goodsHtml);
            }
        }
    }

    xhr.send(null);
}

3. Ajoutez des événements de défilement

window.addEventListener('scroll', function(e) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if ((scrollTop + document.documentElement.clientHeight) >= placeholder.offsetTop) {
        loadMore();
    }
});

Lors du défilement. la barre défile jusqu'au produit Lorsqu'elle atteint le bas de la liste, la fonction loadMore sera appelée, ce qui signifie demander plus de données via Ajax et ajouter les données obtenues au bas de la liste des produits.

Grâce aux trois points de fonction ci-dessus, nous pouvons ajouter davantage de points forts à la conception et à l'expérience interactive des sites Web de commerce électronique. Un style de conception magnifique et concis et une expérience interactive fluide peuvent permettre aux utilisateurs de naviguer et d'acheter plus facilement, et d'améliorer le taux de conversion et le taux de rétention des achats des utilisateurs, ce qui est très important pour les sites Web de commerce électronique.

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!