javaScript Eslite 웹페이지 설정-프런트엔드 Q&A-php.cn

javaScript Eslite 웹페이지 설정

WBOY

풀어 주다： 2023-05-09 19:47:06

원래의

958명이 탐색했습니다.

인터넷의 급속한 발전과 함께 전자상거래 웹사이트는 판매자가 온라인 판매를 수행하는 중요한 채널 중 하나가 되었습니다. 전자상거래 웹사이트에서는 전자상거래 웹사이트의 디자인과 구축이 매우 중요합니다. 좋은 웹사이트는 더 많은 사용자를 유치하고 사용자 구매 전환율과 사용자 유지율을 향상시킬 수 있습니다. 이 기사에서는 JavaScript를 사용하여 Vanke Eslite 전자상거래 웹사이트의 웹페이지에 몇 가지 특수 효과를 추가하는 방법을 소개합니다.

Vancl Eslite는 젊은 소비자 그룹에게 세련된 의류, 신발, 모자, 액세서리 및 기타 제품을 제공하는 독특한 패션 전자상거래 플랫폼입니다. 치열한 경쟁이 벌어지고 있는 오늘날의 시대에는 제품 자체의 품질뿐만 아니라 전자상거래 웹사이트의 디자인과 상호작용 경험도 똑같이 중요합니다. 따라서 우리는 JavaScript 기술을 사용하여 Vancl Eslite의 공식 웹사이트에 몇 가지 특수 효과를 추가하여 웹사이트를 방문할 때 사용자의 시각적 및 대화형 경험을 향상시킵니다.

(1) 내비게이션 슬라이딩 효과

내비게이션 바는 웹사이트의 가장 중요한 구성 요소 중 하나입니다. 내비게이션 바의 모양이 웹사이트의 전체적인 스타일에 직접적인 영향을 미칩니다. 웹사이트의 역동성과 패션성을 높이기 위해 JavaScript를 통해 탐색 모음의 슬라이딩 효과를 구현해야 합니다. 이 효과를 얻는 단계는 다음과 같습니다.

1. 탐색 모음 요소 가져오기

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

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

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

navLine.className = 'nav-line';

navElem.appendChild(navLine);

로그인 후 복사

슬라이딩 요소에 대한 마우스 이동 이벤트 추가

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

로그인 후 복사

탐색 모음의 각 li 요소 좌표 가져오기 , JavaScript를 통해 navLine을 동적으로 변경합니다. 왼쪽 속성 값은 탐색 모음의 슬라이딩 효과를 달성하는 데 사용됩니다.

(2) 상품 목록 상단에 흡착 효과

사이트의 상품 표시 페이지에서는 상단 흡착 효과를 활용하여 사용자의 상품 탐색 편의성과 경험을 향상시킬 수 있습니다. 이 효과를 얻는 단계는 다음과 같습니다.

1. 제품 목록 요소 가져오기

2. 브라우저 창 상단으로부터의 거리 가져오기

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

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

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

로그인 후 복사

3. 스크롤 막대에 스크롤 이벤트 추가

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

로그인 후 복사

스크롤 바의 위치를 판단하여 스크롤 바의 위치가 제품 목록 상단으로부터의 거리보다 큰 경우 제품 목록 상단의 흡착 효과를 얻으려면 제품 목록의 위치를 고정으로 설정하십시오.

(3) 무한 스크롤 지연 로딩 효과

제품 목록 탐색 중에 사용자가 좋아하는 제품을 찾기 위해 계속해서 스크롤을 내려야 하는 경우가 있습니다. 이 경우 이전 접근 방식은 웹 페이지를 자동으로 새로 고치거나 다음 페이지의 버튼을 클릭하여 전환하는 방식이었기 때문에 사용자 경험이 매우 좋지 않았습니다. 무한 스크롤과 지연 로딩 효과를 통해 이 경험을 최적화할 수 있습니다.

이 효과를 얻는 단계는 다음과 같습니다.

1. 제품 목록 하단에 자리 표시자 요소를 추가합니다.

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

로그인 후 복사

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

로그인 후 복사

스크롤 이벤트 추가

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

로그인 후 복사

bar가 해당 제품으로 스크롤되면 목록 하단에 도달하면 loadMore 함수가 호출됩니다. 이는 Ajax를 통해 더 많은 데이터를 요청하고 얻은 데이터를 제품 목록 하단에 추가한다는 의미입니다.

위의 세 가지 기능 포인트를 통해 전자상거래 웹사이트의 디자인과 대화형 경험에 더 많은 하이라이트를 추가할 수 있습니다. 화려하고 간결한 디자인 스타일과 원활한 상호작용 경험은 사용자가 더욱 즐겁게 검색하고 쇼핑할 수 있도록 하며, 전자상거래 웹사이트에 매우 중요한 사용자 구매 전환율과 유지율을 향상시킵니다.

위 내용은 javaScript Eslite 웹페이지 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!