diff --git a/CascadingStyleSheets/Travel/travel.css b/CascadingStyleSheets/Travel/travel.css index d7167bc..397ef2d 100644 --- a/CascadingStyleSheets/Travel/travel.css +++ b/CascadingStyleSheets/Travel/travel.css @@ -35,6 +35,9 @@ --travel-Story-Country-img-left: auto; --travel-Story-Country-img-right: 0; + + --travel-Story-Img-Area-Box-width: 85%; + --travel-Story-Img-Area-Img-width: calc(100% / 4.01); } @media screen and (max-width: 750px) { @@ -69,6 +72,9 @@ --travel-Story-Country-img-left: 0; --travel-Story-Country-img-right: 0; + + --travel-Story-Img-Area-Box-width: 90%; + --travel-Story-Img-Area-Img-width: calc(100% / 2.01); } } @@ -301,6 +307,8 @@ div:has(> #travel_ContentExpand) { top: 101vh; transition: all 1s; + + overflow: hidden; } div:has(> #travel_ContentExpand.contentExpand) { @@ -319,7 +327,7 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory { box-sizing: border-box; - overflow: hidden scroll; + overflow: hidden hidden; transition: all 1s; } @@ -448,6 +456,8 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar { margin: 2em auto; table-layout: fixed; + + z-index: 10; } #traveled_Area #traveled_Area_AreaList tr td { @@ -501,7 +511,7 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar { display: inline-block; - transition: all 1s; + transition: all 0.5s; } #traveled_Area #traveled_Area_AreaList tr td.table_right span.selected { @@ -519,6 +529,67 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar { border: 0 solid var(--font-color-normal); color: #00000000; opacity: 0; + display: inline; +} + +#traveled_Area #traveled_Area_AreaList tr td.table_right span.loadingToHide { + opacity: 0; +} + +#traveled_ImgArea { + + position: absolute; + + top: 0; + left: 0; + + overflow: hidden scroll; + + padding-top: 12em; + + width: 100vw; + height: 100%; + + z-index: 9; +} + +#traveled_ImgArea > div { + width: var(--travel-Story-Img-Area-Box-width); + margin: auto; + + display: flex; + justify-content: center; +} + +#traveled_ImgArea .img_area { + + width: var(--travel-Story-Img-Area-Img-width); +} + +#traveled_ImgArea .traveled_story_img { + + width: 100%; + + display: inline-block; + box-sizing: border-box; + + max-height: 1000vh; + + transition: all 1s; +} + +#traveled_ImgArea img.test { + width: 0; + margin: 0; + padding: 0; + max-height: 0; + position: absolute; + transform: scale(0); + /* display: inline; */ +} + +#traveled_ImgArea::-webkit-scrollbar { + display: none; } #box_TravelPage #travel_TraveledList { diff --git a/Data/Travel/TraveledList.json b/Data/Travel/TraveledList.json index 8e342d9..25052aa 100644 --- a/Data/Travel/TraveledList.json +++ b/Data/Travel/TraveledList.json @@ -2,9 +2,9 @@ "CN": { "BeiJing": { "img": [{ - "src": "", + "src": "0.avif", "alt": "", - "city": "_city0_", + "city": "_dongcheng_", "labels": ["_test0_", "_test1_", "_test2_", "_test3_"] }, { "src": "", diff --git a/File/Image/Travel/China/BeiJing/0.avif b/File/Image/Travel/China/BeiJing/0.avif new file mode 100644 index 0000000..61b4a50 Binary files /dev/null and b/File/Image/Travel/China/BeiJing/0.avif differ diff --git a/File/Image/Travel/China/BeiJing/1.avif b/File/Image/Travel/China/BeiJing/1.avif new file mode 100644 index 0000000..499e952 Binary files /dev/null and b/File/Image/Travel/China/BeiJing/1.avif differ diff --git a/JavaScript/General/tools.js b/JavaScript/General/tools.js index b9c7c56..4bdb29e 100644 --- a/JavaScript/General/tools.js +++ b/JavaScript/General/tools.js @@ -81,7 +81,9 @@ export const tools = { country: "/Language/Area/country.json", countryCN: "/Language/Area/CN.json", countryMY: "/Language/Area/MY.json", - countrySG: "/Language/Area/SG.json" + countrySG: "/Language/Area/SG.json", + + cityCN: "/Language/Area/City/CN.json" }; const translateEntries = await Promise.all( diff --git a/JavaScript/Travel/travel.js b/JavaScript/Travel/travel.js index 729fafd..d01b704 100644 --- a/JavaScript/Travel/travel.js +++ b/JavaScript/Travel/travel.js @@ -460,16 +460,32 @@ const SeeChen_TravelPage_ImgLabels_Event = { if (Label_Filter_City.includes(`_${element.id.split("_")[2]}_`)) { element.classList.add("stay"); + setTimeout(() => { + if (element.classList.contains("loadingToHide")) { + element.classList.remove("loadingToHide"); + } + }, 500); } else if (element.classList.contains("stay")) { - element.classList.remove("stay"); + element.classList.add("loadingToHide"); + setTimeout(() => { + element.classList.remove("stay"); + }, 500); } }); table_label.querySelectorAll("span").forEach(element => { if (Label_Filter_Label.includes(`_${element.id.split("_")[2]}_`)) { element.classList.add("stay"); + setTimeout(() => { + if (element.classList.contains("loadingToHide")) { + element.classList.remove("loadingToHide"); + } + }, 500); } else if (element.classList.contains("stay")) { - element.classList.remove("stay"); + element.classList.add("loadingToHide"); + setTimeout(() => { + element.classList.remove("stay"); + }, 500); } }); } diff --git a/Language/Area/City/CN.json b/Language/Area/City/CN.json new file mode 100644 index 0000000..d9723d1 --- /dev/null +++ b/Language/Area/City/CN.json @@ -0,0 +1,75 @@ +{ + "zh": { + "_dongcheng_": "东城区", + "AuHui": "安徽省", + "ChongQing": "重庆市", + "FuJian": "福建省", + "GuangDong": "广东省", + "GanSu": "甘肃省", + "GuangXi": "广西壮族自治区", + "GuiZhou": "贵州省", + "HaiNan": "海南省", + "HeBei": "河北省", + "HeNan": "河南省", + "HongKong": "香港特别行政区", + "HeiLongJiang": "黑龙江省", + "HuNan": "湖南省", + "HuBei": "湖北省", + "JiLing": "吉林省", + "JiangSu": "江苏省", + "JiangXi": "江西省", + "LiaoNing": "辽宁省", + "Macau": "澳门特别行政区", + "InnerMongolia": "内蒙古自治区", + "NingXia": "宁夏回族自治区", + "QingHai": "青海省", + "ShaanXi": "陕西省", + "SiChuan": "四川省", + "ShanDong": "山东省", + "ShangHai": "上海市", + "ShanXi": "山西省", + "TianJin": "天津市", + "TaiWan": "台湾省", + "XinJiang": "新疆维吾尔自治区", + "Tibet": "西藏藏族自治区", + "YunNan": "云南省", + "ZheJiang": "浙江省" + }, + + "en": { + "_dongcheng_": "Dongcheng District", + "AuHui": "ANHUI", + "ChongQing": "CHONGQING", + "FuJian": "FUJIAN", + "GuangDong": "GUANGDONG", + "GanSu": "GANSU", + "GuangXi": "GUANGXI", + "GuiZhou": "GUIZHOU", + "HaiNan": "HAINAN", + "HeBei": "HEBEI", + "HeNan": "HENAN", + "HongKong": "HONGKONG", + "HeiLongJiang": "HELONGJIANG", + "HuNan": "HUNAN", + "HuBei": "HUBEI", + "JiLing": "JILIN", + "JiangSu": "JIANGSU", + "JiangXi": "JIANGXI", + "LiaoNing": "LIAONING", + "Macau": "MACAU", + "InnerMongolia": "INNER MONGOLIA", + "NingXia": "NINGXIA", + "QingHai": "QINGHAI", + "ShaanXi": "SHAANXI", + "SiChuan": "SICHUAN", + "ShanDong": "SHANDONG", + "ShangHai": "SHANGHAI", + "ShanXi": "SHANXI", + "TianJin": "TIANJIN", + "TaiWan": "TAIWAN", + "XinJiang": "XINJIANG", + "Tibet": "TIBET", + "YunNan": "YUNNAN", + "ZheJiang": "ZHEJIANG" + } +} \ No newline at end of file diff --git a/spa.html b/spa.html index 2705380..6565f4a 100644 --- a/spa.html +++ b/spa.html @@ -93,23 +93,7 @@ SINGAPORE
-
-
- -

CHINA

-

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

-
-
- -

CHINA

-

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

-
-
- -

CHINA

-

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

-
-
+
@@ -117,33 +101,6 @@ @@ -151,37 +108,43 @@
City _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_
Label _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_ - _city0_ - _city1_ - _city2_ - _city3_ - _city4_ - _city5_ - _city6_
+ +
+
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+