javaScript Eslite web page settings

With the rapid development of the Internet, e-commerce websites have become one of the important channels for merchants to conduct online sales. In e-commerce websites, the design and construction of e-commerce websites is very important. A good website can attract more users, improve user purchase conversion rate and user retention rate. This article will introduce how to use JavaScript to add some special effects to the web pages of Vanke Eslite e-commerce website.

Vancl Eslite is a unique fashion e-commerce platform that provides young consumer groups with fashionable clothing, shoes, hats, accessories and other products. In this era of fierce competition, in addition to the quality of the products themselves, the design and interactive experience of the e-commerce website are equally critical. Therefore, we use JavaScript skills to add some special effects to the official website of Vancl Eslite to improve the visual and interactive experience of users when visiting the website.

(1) Navigation sliding effect

The navigation bar is one of the most important components of the website. Whether the navigation bar looks good or not directly affects the overall style of the website. We need to implement the sliding effect of the navigation bar through JavaScript to increase the dynamics and fashion of the website. The steps to achieve this effect are as follows:

1. Get the navigation bar element

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

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

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

navLine.className = 'nav-line';

navElem.appendChild(navLine);

2. Add a mouse move-in event for the sliding element

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

By getting The coordinates of each li element of the navigation bar are dynamically changed through JavaScript to achieve the sliding effect of the navigation bar by changing the left attribute value of navLine.

(2) Adsorption effect at the top of the product list

The product display page of the website can use the top adsorption effect to improve the user's comfort and experience in browsing products. The steps to achieve this effect are as follows:

1. Get the product list element

2. Get the distance from the top of the browser window

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

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

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

3. Add a scroll event to the scroll bar

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

By judging the position of the scroll bar, if the position of the scroll bar is greater than the distance from the top of the product list, set the position of the product list to fixed to achieve the adsorption effect at the top of the product list.

(3) Infinite scrolling lazy loading effect

When browsing the product list, sometimes users need to scroll down continuously to find their favorite products. In this case, the previous approach was to automatically refresh the web page or click the button of the next page to switch, which resulted in a very poor user experience. We can optimize this experience through infinite scrolling and lazy loading effects.

The steps to achieve this effect are as follows:

1. Add placeholder elements at the bottom of the product list

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

2. Load more data through 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. Add scroll event

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

When the scroll bar scrolls to the bottom of the product list, the loadMore function will be called, that is, requesting more data through Ajax and appending the obtained data to the product bottom of the list.

Through the above three functional points, we can add more highlights to the design and interactive experience of e-commerce websites. Gorgeous and concise design style and smooth interactive experience can make users browse and shop more happily, and improve user purchase conversion rate and retention rate, which is very important for e-commerce websites.

The above is the detailed content of javaScript Eslite web page settings. For more information, please follow other related articles on the PHP Chinese website!