JavaScript 誠品 Web ページの設定-フロントエンドQ&A-php.cn

JavaScript 誠品 Web ページの設定

WBOY

リリース： 2023-05-09 19:47:06

オリジナル

959 人が閲覧しました

インターネットの急速な発展に伴い、電子商取引 Web サイトは販売業者がオンライン販売を行うための重要なチャネルの 1 つになりました。 ECサイトにおいては、ECサイトのデザインや構築が非常に重要であり、優れたWebサイトはより多くのユーザーを惹きつけ、ユーザーの購入転換率やユーザー維持率を向上させることができます。この記事では、JavaScript を使用して万科誠品電子商取引 Web サイトの Web ページに特殊効果を追加する方法を紹介します。

Vancl Eslite は、若い消費者グループにファッショナブルな衣類、靴、帽子、アクセサリーなどの商品を提供するユニークなファッション電子商取引プラットフォームです。この熾烈な競争の時代では、製品自体の品質に加えて、電子商取引 Web サイトのデザインとインタラクティブなエクスペリエンスも同様に重要です。そのため、当社では JavaScript スキルを使用して Vancl Eslite の公式 Web サイトに特殊効果を追加し、Web サイトを訪問する際のユーザーの視覚的およびインタラクティブなエクスペリエンスを向上させています。

(1) ナビゲーションのスライド効果

ナビゲーションバーは Web サイトの最も重要なコンポーネントの 1 つであり、ナビゲーションバーの見栄えが良いかどうかは、Web サイト全体のスタイルに直接影響します。 Web サイトのダイナミクスとファッション性を高めるために、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';
    }
});

ログイン後にコピー

By get ナビゲーションバーの各 li 要素の座標は、navLine の left 属性値を変更することで、JavaScript を通じて動的に変更され、ナビゲーションバーのスライド効果を実現します。

(2) 商品リスト上部の吸着効果

Web サイトの商品表示ページでは、上部の吸着効果を利用して、ユーザーの商品閲覧の快適性と体験を向上させることができます。この効果を実現する手順は次のとおりです:

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) 無限スクロールの遅延読み込み効果

製品リストを閲覧するとき、ユーザーはお気に入りの製品を見つけるために継続的に下にスクロールする必要がある場合があります。この場合、以前のアプローチでは、Web ページを自動的に更新するか、次のページのボタンをクリックして切り替えることでしたが、その結果、ユーザーエクスペリエンスが非常に低下しました。無限スクロールと遅延読み込み効果を通じて、このエクスペリエンスを最適化できます。

この効果を実現する手順は次のとおりです:

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

ログイン後にコピー

スクロールバーが製品リストの一番下までスクロールすると、loadMore 関数が呼び出されます。つまり、Ajax を通じて追加のデータを要求し、取得したデータをリストの製品の最後に追加します。

上記の 3 つの機能ポイントを通じて、電子商取引 Web サイトのデザインとインタラクティブなエクスペリエンスにさらにハイライトを追加できます。ゴージャスで簡潔なデザインスタイルとスムーズなインタラクティブエクスペリエンスにより、ユーザーはより楽しく閲覧して買い物をすることができ、電子商取引 Web サイトにとって非常に重要であるユーザーの購入コンバージョン率と維持率を向上させることができます。

以上がJavaScript 誠品 Web ページの設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。