tetapan halaman web javaScript Eslite

Dengan perkembangan pesat Internet, laman web e-dagang telah menjadi salah satu saluran penting untuk peniaga menjalankan jualan dalam talian. Dalam laman web e-dagang, reka bentuk dan pembinaan laman web e-dagang adalah sangat penting. Laman web yang baik boleh menarik lebih ramai pengguna, meningkatkan kadar penukaran pembelian pengguna dan kadar pengekalan pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menambahkan beberapa kesan khas pada halaman web tapak web e-dagang Vanke Eslite.

Vancl Eslite ialah platform e-dagang fesyen unik yang menyediakan kumpulan pengguna muda dengan pakaian bergaya, kasut, topi, aksesori dan produk lain. Dalam era persaingan yang sengit ini, selain kualiti produk itu sendiri, reka bentuk dan pengalaman interaktif laman web e-dagang adalah sama kritikal. Oleh itu, kami menggunakan kemahiran JavaScript untuk menambah beberapa kesan khas pada tapak web rasmi Vancl Eslite untuk meningkatkan pengalaman visual dan interaktif pengguna apabila melawati tapak web.

(1) Kesan gelongsor navigasi

Bar navigasi ialah salah satu komponen terpenting tapak web Sama ada bar navigasi kelihatan baik atau tidak secara langsung mempengaruhi gaya keseluruhan tapak web. Kami perlu melaksanakan kesan gelongsor bar navigasi melalui JavaScript untuk meningkatkan dinamik dan fesyen tapak web. Langkah-langkah untuk mencapai kesan ini adalah seperti berikut:

1 Dapatkan elemen bar navigasi

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

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

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

navLine.className = 'nav-line';

navElem.appendChild(navLine);

2. Tambah acara bergerak masuk tetikus untuk elemen gelongsor

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

Dapatkan Koordinat setiap elemen li bar navigasi ditukar secara dinamik melalui JavaScript untuk mencapai kesan gelongsor bar navigasi dengan menukar nilai atribut kiri navLine.

(2) Kesan penjerapan di bahagian atas senarai produk

Halaman paparan produk tapak web boleh menggunakan kesan penjerapan teratas untuk meningkatkan keselesaan dan pengalaman pengguna menyemak imbas produk. Langkah-langkah untuk mencapai kesan ini adalah seperti berikut:

1 Dapatkan elemen senarai produk

2 Dapatkan jarak dari bahagian atas tetingkap pelayar

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

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

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

3. Tambahkan acara skrol pada bar skrol

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

Dengan menilai kedudukan bar skrol, jika kedudukan bar skrol lebih besar daripada jarak dari bahagian atas senarai produk, tetapkan kedudukan produk senarai ke tetap untuk mencapai kesan penjerapan di bahagian atas senarai produk.

(3) Kesan pemuatan malas menatal tanpa had

Dalam menyemak imbas senarai produk, kadangkala pengguna perlu terus menatal ke bawah untuk mencari produk kegemaran mereka. Dalam kes ini, pendekatan sebelumnya adalah untuk memuat semula halaman web secara automatik atau klik butang halaman seterusnya untuk bertukar, yang mengakibatkan pengalaman pengguna yang sangat buruk. Kami boleh mengoptimumkan pengalaman ini melalui penatalan tanpa had dan kesan pemuatan malas.

Langkah-langkah untuk mencapai kesan ini adalah seperti berikut:

1 Tambah elemen pemegang tempat di bahagian bawah senarai produk

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

2 >

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

Tambah acara tatal

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

Apabila bar skrol menatal ke bahagian bawah senarai produk, fungsi loadMore akan dipanggil, iaitu meminta lebih banyak data melalui Ajax dan menambahkan data yang diperoleh ke bahagian bawah produk senarai.

Melalui tiga perkara berfungsi di atas, kami boleh menambah lebih banyak sorotan pada reka bentuk dan pengalaman interaktif tapak web e-dagang. Gaya reka bentuk yang cantik dan ringkas serta pengalaman interaktif yang lancar boleh membuatkan pengguna menyemak imbas dan membeli-belah dengan lebih gembira, serta meningkatkan kadar penukaran pembelian pengguna dan kadar pengekalan, yang sangat penting untuk tapak web e-dagang.

Atas ialah kandungan terperinci tetapan halaman web javaScript Eslite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!