From 90c30e9914353d9b3bdc9172cc3356e56d9e476d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=8A=9F=E7=85=A7?= <3210416196@qq.com>
Date: Tue, 19 Nov 2024 17:40:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...\345\207\217\346\223\215\344\275\234.html" | 51 +++++++++
...\346\242\257\345\257\274\350\210\252.html" | 105 +++++++++++++-----
2 files changed, 131 insertions(+), 25 deletions(-)
create mode 100644 "\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
diff --git "a/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html" "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
new file mode 100644
index 0000000..0a1971f
--- /dev/null
+++ "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252.html" "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252.html"
index f1fe3d4..3eab962 100644
--- "a/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252.html"
+++ "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252\347\264\240\346\235\220/\347\224\265\346\242\257\345\257\274\350\210\252.html"
@@ -52,31 +52,31 @@
@@ -1221,21 +1221,25 @@
*/
// 0 获取相关对象
- const freshDiv = document.querySelector('.xtx_panel_header')//新鲜好物对象
- const peopleDiv = document.querySelector('.xtx_goods_popular .xtx_panel_header')//人气推荐对象
- const hotDiv = document.querySelector('.xtx_goods_brand .xtx_panel_header')//热门品牌对象
- const topicDiv = document.querySelector('.xtx_goods_topic .xtx_panel_header')//最新专题对象
+
+ const freshDiv = document.querySelector('.xtx_panel_header')//新鲜好物对象
+ const peopleDiv = document.querySelector('.xtx_goods_popular .xtx_panel_header')//人气推荐对象
+ const hotDiv = document.querySelector('.xtx_goods_brand .xtx_panel_header')//热门品牌对象
+ const topicDiv = document.querySelector('.xtx_goods_topic .xtx_panel_header')//最新专题对象
- const div1 = document.querySelector('.xtx_entry');
- const endDiv = document.querySelector('.xtx-elevator');
+ const div1 = document.querySelector('.xtx_entry'); // 分类及焦点图对象
+ const endDiv = document.querySelector('.xtx-elevator'); // 电梯对象
- const aNew = document.querySelector('[data-name="new"]'); // 获取新鲜好物a标签
- const aPopular = document.querySelector('[data-name="popular"]'); // 获取人气推荐a标签
- const aHot = document.querySelector('[data-name="brand"]'); // 获取热门品牌a标签
- const aTopic = document.querySelector('[data-name="topic"]'); // 获取最新专题a标签
- const aTop = document.querySelector('#backTop'); // 获取回到顶部a标签
+ const aNew = document.querySelector('[data-name="new"]'); // 获取新鲜好物a标签
+ const aPopular = document.querySelector('[data-name="popular"]'); // 获取人气推荐a标签
+ const aHot = document.querySelector('[data-name="brand"]'); // 获取热门品牌a标签
+ const aTopic = document.querySelector('[data-name="topic"]'); // 获取最新专题a标签
+ const aTop = document.querySelector('#backTop'); // 获取回到顶部a标签
+ const ul = document.querySelector('.clearfix');// 获取主导航对象
+
+ // 电梯导航
window.addEventListener('scroll', function () {
// 获取页面滚动的距离
const rollDistance = document.documentElement.scrollTop;
@@ -1252,33 +1256,84 @@
// 进行比较并将导航框显示出来
if (rollDistance >= div1Distance) {
endDiv.style.opacity = 1;
+ endDiv.style.display = 'block';
} else {
endDiv.style.opacity = 0;
+ endDiv.style.display = 'none';
}
aTop.addEventListener('click', function () {
- document.documentElement.scrollTop = 0; // 点击导航框的时候将页面滚动距离设为0
+ window.scrollTo({ top: 0, behavior: "smooth" }) // 点击导航框的时候将页面滚动距离设为0
});
aNew.addEventListener('click', function () {
- document.documentElement.scrollTop = freshDistance; // 点击导航框的时候将新鲜好物到页面顶端的距离赋值给页面滚动距离
+ window.scrollTo({ top: freshDistance, behavior: "smooth" }); // 点击导航框的时候将新鲜好物到页面顶端的距离赋值给页面滚动距离
});
aPopular.addEventListener('click', function () {
- document.documentElement.scrollTop = peopleDistance; // 点击导航框的时候将人气推荐到页面顶端的距离赋值给页面滚动距离
+ window.scrollTo({ top: peopleDistance, behavior: "smooth" }); // 点击导航框的时候将人气推荐到页面顶端的距离赋值给页面滚动距离
});
aHot.addEventListener('click', function () {
- document.documentElement.scrollTop = hotDistance; // 点击导航框的时候将热门品牌到页面顶端的距离赋值给页面滚动距离
+ window.scrollTo({ top: hotDistance, behavior: "smooth" }); // 点击导航框的时候将热门品牌到页面顶端的距离赋值给页面滚动距离
});
aTopic.addEventListener('click', function () {
- document.documentElement.scrollTop = topDistance; // 点击导航框的时候将新品专题到页面顶端的距离赋值给页面滚动距离
+
+ window.scrollTo({ top: topDistance, behavior: "smooth" }); // 点击导航框的时候将新品专题到页面顶端的距离赋值给页面滚动距离
});
+ //用于删除active样式的函数
+ let delActive = function () {
+ const del = document.querySelector('.active'); // 获取有active样式的对象
+ if (del) {
+ del.classList.remove('active');
+ }
+ }
+
+ if (rollDistance >= freshDistance && rollDistance < peopleDistance) {
+ delActive();
+ document.querySelector('[data-name="new"]').classList.add('active');
+
+ }
+ else if (rollDistance >= peopleDistance && rollDistance < hotDistance) {
+ delActive();
+ document.querySelector('[data-name="popular"]').classList.add('active')
+ } else {
+ delActive();
+ }
});
+
+ // 给ul导航框添加点击事件实现跳转
+ ul.addEventListener('click', function (e) {
+ const allDiv = document.querySelectorAll('.xtx_goods_category .xtx_panel_header') // 获取生鲜及其他品类所在的div
+ const n1 = allDiv[0].offsetTop; // 生鲜离顶端的距离
+ const n2 = allDiv[1].offsetTop; // 服饰离顶端的距离
+ const n3 = allDiv[2].offsetTop; // 餐厨离顶端的距离
+ const n4 = allDiv[3].offsetTop; // 居家离顶端的距离
+ // console.log(n1)
+ if (e.target.tagName === 'A') {
+
+ if (e.target.dataset.id == 2) {
+ window.scrollTo({ top: n1, behavior: "smooth" });
+ }
+
+ if (e.target.dataset.id == 9) {
+ window.scrollTo({ top: n2, behavior: "smooth" })
+ }
+
+ if (e.target.dataset.id == 4) {
+ window.scrollTo({ top: n3, behavior: "smooth" })
+ }
+
+ if (e.target.dataset.id == 6) {
+ window.scrollTo({ top: n4, behavior: "smooth" })
+ }
+ }
+ });
+
--
Gitee
From 1ed601f86ac45a2db831288b2cb40fa66b392528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=96=E9=A3=9E=E9=B9=8F?= <2879562915@qq.com>
Date: Tue, 19 Nov 2024 22:00:46 +0800
Subject: [PATCH 2/2] update
---
...\345\207\217\346\223\215\344\275\234.html" | 18 ++++++
...\346\242\257\345\257\274\350\210\252.html" | 56 +++++++++++--------
2 files changed, 51 insertions(+), 23 deletions(-)
diff --git "a/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html" "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
index 0a1971f..f5533cc 100644
--- "a/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
+++ "b/\345\217\266\345\212\237\347\205\247/20241118 JS\346\273\232\345\212\250\344\272\213\344\273\266\345\257\274\350\210\252/03-\350\264\255\347\211\251\350\275\246\345\212\240\345\207\217\346\223\215\344\275\234.html"
@@ -43,6 +43,24 @@