JavaScript-Eslite-Webseiteneinstellungen

Mit der rasanten Entwicklung des Internets sind E-Commerce-Websites für Händler zu einem wichtigen Kanal für Online-Verkäufe geworden. Bei E-Commerce-Websites ist das Design und der Aufbau von E-Commerce-Websites sehr wichtig. Eine gute Website kann mehr Benutzer anziehen, die Kaufkonversionsrate der Benutzer verbessern und die Benutzerbindungsrate verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Webseiten der E-Commerce-Website von Vanke Eslite einige Spezialeffekte hinzufügen.

Vancl Eslite ist eine einzigartige Mode-E-Commerce-Plattform, die junge Verbrauchergruppen mit modischer Kleidung, Schuhen, Hüten, Accessoires und anderen Produkten versorgt. In Zeiten harten Wettbewerbs sind neben der Qualität der Produkte selbst auch das Design und das interaktive Erlebnis der E-Commerce-Website von entscheidender Bedeutung. Daher nutzen wir JavaScript-Kenntnisse, um der offiziellen Website von Vancl Eslite einige Spezialeffekte hinzuzufügen, um das visuelle und interaktive Erlebnis der Benutzer beim Besuch der Website zu verbessern.

(1) Navigations-Gleiteffekt

Die Navigationsleiste ist eine der wichtigsten Komponenten der Website. Ob die Navigationsleiste gut aussieht oder nicht, wirkt sich direkt auf den Gesamtstil der Website aus. Wir müssen den Gleiteffekt der Navigationsleiste über JavaScript implementieren, um die Dynamik und Mode der Website zu erhöhen. Die Schritte, um diesen Effekt zu erzielen, sind wie folgt:

1. Holen Sie sich das Navigationsleistenelement

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

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

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

navLine.className = 'nav-line';

navElem.appendChild(navLine);

2. Fügen Sie ein Mausbewegungsereignis für das Schiebeelement hinzu

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

Indem Sie die Koordinaten jedes li-Elements der Navigationsleiste abrufen Ändern Sie die Navigationslinie dynamisch über JavaScript. Der linke Attributwert wird verwendet, um den Gleiteffekt der Navigationsleiste zu erzielen.

(2) Adsorptionseffekt oben in der Produktliste

Die Produktanzeigeseite der Website kann den Adsorptionseffekt oben nutzen, um den Komfort und das Erlebnis der Benutzer beim Durchsuchen von Produkten zu verbessern. Die Schritte, um diesen Effekt zu erzielen, sind wie folgt:

1. Holen Sie sich den Abstand vom oberen Rand des Browserfensters

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

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

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

3 Beurteilen Sie die Position der Bildlaufleiste. Wenn die Position der Bildlaufleiste größer als der Abstand vom oberen Rand der Produktliste ist, stellen Sie die Position der Produktliste auf „Fest“ ein, um den Adsorptionseffekt oben in der Produktliste zu erzielen.

(3) Unendlicher Scroll-Lazy-Loading-Effekt

Beim Durchsuchen von Produktlisten müssen Benutzer manchmal kontinuierlich nach unten scrollen, um ihre Lieblingsprodukte zu finden. In diesem Fall bestand der bisherige Ansatz darin, die Webseite automatisch zu aktualisieren oder auf die Schaltfläche zur nächsten Seite zu klicken, um zu wechseln, was zu einer sehr schlechten Benutzererfahrung führte. Wir können dieses Erlebnis durch unendliches Scrollen und Lazy-Loading-Effekte optimieren.

Die Schritte, um diesen Effekt zu erzielen, sind wie folgt:

1. Platzhalterelemente am Ende der Produktliste hinzufügen

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

2. Weitere Daten über Ajax laden

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

Scroll-Ereignisse hinzufügen

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

Wenn der Bildlauf erfolgt Die Leiste scrollt zum Produkt. Wenn das Ende der Liste erreicht ist, wird die Funktion „loadMore“ aufgerufen. Dies bedeutet, dass über Ajax weitere Daten angefordert und die erhaltenen Daten an das Ende der Produktliste angehängt werden.
3. Durch die oben genannten drei Funktionspunkte können wir dem Design und dem interaktiven Erlebnis von E-Commerce-Websites weitere Highlights hinzufügen. Ein wunderschöner und prägnanter Designstil und ein reibungsloses interaktives Erlebnis können dazu führen, dass Benutzer glücklicher stöbern und einkaufen und die Kaufkonversionsrate und Bindungsrate der Benutzer verbessern, was für E-Commerce-Websites sehr wichtig ist.

Das obige ist der detaillierte Inhalt vonJavaScript-Eslite-Webseiteneinstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!