Skip to content

Commit

Permalink
2024022803
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spectrollay
Spectrollay committed Feb 28, 2024
1 parent 91f95ef commit 017ccf8
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 63 deletions.
40 changes: 26 additions & 14 deletions experimental/flags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,32 +152,44 @@
<div>Slider</div>
<br>
<div>Smooth Slider1</div>
<div class="slider smooth-slider" id="smoothSlider1">
<div class="slider-handle smooth-handle" id="smoothHandle"></div>
<div class="slider-tooltip smooth-tooltip" id="smoothTooltip">0.00</div>
<div class="slider_content">
<div class="slider smooth-slider" id="smoothSlider1">
<div class="slider-process"></div>
<div class="slider-handle smooth-handle" id="smoothHandle"></div>
<div class="slider-tooltip smooth-tooltip" id="smoothTooltip">0.00</div>
</div>
</div>
<br>
<br>
<div>Smooth Slider2</div>
<div class="slider smooth-slider" id="smoothSlider2">
<div class="slider-handle smooth-handle" id="smoothHandle2"></div>
<div class="slider-tooltip smooth-tooltip" id="smoothTooltip2">0.00</div>
<div class="slider_content">
<div class="slider smooth-slider" id="smoothSlider2">
<div class="slider-process"></div>
<div class="slider-handle smooth-handle" id="smoothHandle2"></div>
<div class="slider-tooltip smooth-tooltip" id="smoothTooltip2">0.00</div>
</div>
</div>
<br>
<br>
<div>Segmented Slider1</div>
<div class="slider segmented-slider" id="segmentedSlider1">
<div class="slider-handle segmented-handle" id="segmentedHandle"></div>
<div class="slider-tooltip segmented-tooltip" id="segmentedTooltip">0</div>
<div class="slider-segment" style="display: none"></div>
<div class="slider_content">
<div class="slider segmented-slider" id="segmentedSlider1">
<div class="slider-process"></div>
<div class="slider-handle segmented-handle" id="segmentedHandle"></div>
<div class="slider-tooltip segmented-tooltip" id="segmentedTooltip">0</div>
<div class="slider-segment" style="display: none"></div>
</div>
</div>
<br>
<br>
<div>Segmented Slider2</div>
<div class="slider segmented-slider" id="segmentedSlider2">
<div class="slider-handle segmented-handle" id="segmentedHandle2"></div>
<div class="slider-tooltip segmented-tooltip" id="segmentedTooltip2">0</div>
<div class="slider-segment" style="display: none"></div>
<div class="slider_content">
<div class="slider segmented-slider" id="segmentedSlider2">
<div class="slider-process"></div>
<div class="slider-handle segmented-handle" id="segmentedHandle2"></div>
<div class="slider-tooltip segmented-tooltip" id="segmentedTooltip2">0</div>
<div class="slider-segment" style="display: none"></div>
</div>
</div>
<br>
<br>
Expand Down
115 changes: 68 additions & 47 deletions javascript/advanced.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,50 +31,54 @@ observer.observe(targetNode1, observerConfig);
observer.observe(targetNode2, observerConfig);

// 在页面加载时初始化Slider
// window.addEventListener('DOMContentLoaded', function () {
// setupSlider([
// {
// sliderId: 'smoothSlider1',
// sliderClass: 'smooth-slider',
// handleClass: 'smooth-handle',
// tooltipClass: 'smooth-tooltip',
// minValue: 0,
// maxValue: 100,
// segments: null,
// initialValue: 66.66
// },
// {
// sliderId: 'smoothSlider2',
// sliderClass: 'smooth-slider',
// handleClass: 'smooth-handle',
// tooltipClass: 'smooth-tooltip',
// minValue: 20,
// maxValue: 60,
// segments: null,
// initialValue: null
// },
// {
// sliderId: 'segmentedSlider1',
// sliderClass: 'segmented-slider',
// handleClass: 'segmented-handle',
// tooltipClass: 'segmented-tooltip',
// minValue: 0,
// maxValue: 100,
// segments: 5,
// initialValue: null
// },
// {
// sliderId: 'segmentedSlider2',
// sliderClass: 'segmented-slider',
// handleClass: 'segmented-handle',
// tooltipClass: 'segmented-tooltip',
// minValue: 0,
// maxValue: 100,
// segments: 4,
// initialValue: 75
// }
// ]);
// });
window.addEventListener('DOMContentLoaded', function () {
setupSlider([
{
sliderId: 'smoothSlider1',
sliderClass: 'smooth-slider',
processClass: 'slider-process',
handleClass: 'smooth-handle',
tooltipClass: 'smooth-tooltip',
minValue: 0,
maxValue: 100,
segments: null,
initialValue: 66.66
},
{
sliderId: 'smoothSlider2',
sliderClass: 'smooth-slider',
processClass: 'slider-process',
handleClass: 'smooth-handle',
tooltipClass: 'smooth-tooltip',
minValue: 20,
maxValue: 60,
segments: null,
initialValue: null
},
{
sliderId: 'segmentedSlider1',
sliderClass: 'segmented-slider',
processClass: 'slider-process',
handleClass: 'segmented-handle',
tooltipClass: 'segmented-tooltip',
minValue: 0,
maxValue: 100,
segments: 5,
initialValue: null
},
{
sliderId: 'segmentedSlider2',
sliderClass: 'segmented-slider',
processClass: 'slider-process',
handleClass: 'segmented-handle',
tooltipClass: 'segmented-tooltip',
minValue: 0,
maxValue: 100,
segments: 4,
initialValue: 75
}
]);
});


// 主代码
Expand Down Expand Up @@ -171,6 +175,7 @@ function setupSlider(sliderData) {

sliderData.forEach(function (data) {
const slider = document.getElementById(data.sliderId);
const process = slider.querySelector('.' + data.processClass);
const handle = slider.querySelector('.' + data.handleClass);
const tooltip = slider.querySelector('.' + data.tooltipClass);
const minValue = data.minValue;
Expand All @@ -182,6 +187,7 @@ function setupSlider(sliderData) {
// 设置初始值并展示
const initialPosition = (initialValue - minValue) / (maxValue - minValue) * slider.offsetWidth;
handle.style.left = initialPosition + 'px';
process.style.width = initialPosition + 'px';

if (slider.classList.contains('smooth-slider')) {
// 设置平滑的slider
Expand All @@ -190,6 +196,7 @@ function setupSlider(sliderData) {
tooltip.textContent = initialValue.toFixed(2);

function updateValueSmoothSlider(posX) {
updateProcessBar(posX); // 更新进度条背景
currentValue = ((posX / slider.offsetWidth) * (maxValue - minValue)) + minValue;
tooltip.textContent = currentValue.toFixed(2);
// document.getElementById('smoothValue').textContent = `Smooth Slider: ${value.toFixed(2)}`;
Expand All @@ -210,6 +217,7 @@ function setupSlider(sliderData) {

handle.addEventListener('mousedown', function (e) {
isDragging = true;
process.style.transition = 'none';
handle.style.transition = 'none';
handleDragSmoothSlider(e);
});
Expand All @@ -218,11 +226,13 @@ function setupSlider(sliderData) {

document.addEventListener('mouseup', function () {
isDragging = false;
process.style.transition = 'width 100ms linear';
handle.style.transition = 'left 100ms linear';
});

handle.addEventListener('touchstart', function (e) {
isDragging = true;
process.style.transition = 'none';
handle.style.transition = 'none';
handleDragSmoothSlider(e.touches[0]); // 使用第一个触摸点的位置
});
Expand All @@ -236,6 +246,7 @@ function setupSlider(sliderData) {

document.addEventListener('touchend', function () {
isDragging = false;
process.style.transition = 'width 100ms linear';
handle.style.transition = 'left 100ms linear';
});

Expand All @@ -259,7 +270,7 @@ function setupSlider(sliderData) {
const minValueLabel = document.createElement('div');
minValueLabel.textContent = minValue.toFixed(2);
minValueLabel.style.position = 'absolute';
minValueLabel.style.bottom = '-25px';
minValueLabel.style.bottom = '-30px';
slider.appendChild(minValueLabel);

const minValueLabelWidth = minValueLabel.offsetWidth;
Expand All @@ -268,7 +279,7 @@ function setupSlider(sliderData) {
const maxValueLabel = document.createElement('div');
maxValueLabel.textContent = maxValue.toFixed(2);
maxValueLabel.style.position = 'absolute';
maxValueLabel.style.bottom = '-25px';
maxValueLabel.style.bottom = '-30px';
slider.appendChild(maxValueLabel);

const maxValueLabelWidth = maxValueLabel.offsetWidth;
Expand All @@ -282,6 +293,7 @@ function setupSlider(sliderData) {
tooltip.textContent = initialValue.toFixed(2).replace(/\.?0+$/, '');

function updateValueSegmentSlider(posX) {
updateProcessBar(posX); // 更新进度条背景
const segmentIndex = Math.round(posX / (slider.offsetWidth / segments));
currentValue = segmentIndex * segmentWidth + minValue;
tooltip.textContent = currentValue.toFixed(2).replace(/\.?0+$/, '');
Expand All @@ -291,6 +303,7 @@ function setupSlider(sliderData) {
function handleDragSegmentSlider(e) {
if (isDragging) {
let posX = e.clientX - slider.getBoundingClientRect().left;
updateProcessBar(posX); // 更新进度条背景
if (posX < 0) {
posX = 0;
} else if (posX > slider.offsetWidth) {
Expand Down Expand Up @@ -360,7 +373,7 @@ function setupSlider(sliderData) {
const segmentValue = minValue + i * (maxValue - minValue) / segments;
segmentValueLabel.textContent = segmentValue.toFixed(2).replace(/\.?0+$/, '');
segmentValueLabel.style.position = 'absolute';
segmentValueLabel.style.bottom = '-25px';
segmentValueLabel.style.bottom = '-30px';
slider.appendChild(segmentValueLabel);

// 获取标签宽度
Expand All @@ -387,15 +400,23 @@ function setupSlider(sliderData) {
handle.style.left = newPosition + 'px';
}

function updateProcessBar(posX) {
const value = posX / slider.offsetWidth;
process.style.width = `${value * 100}%`;
}

window.addEventListener('resize', function () {
if (!resizing) {
resizing = true;
setTimeout(function () {
resizing = false;
}, 0);
process.style.transition = 'none';
handle.style.transition = 'none';
replaceHandle();
updateProcessBar(handle.offsetLeft);
setTimeout(function () {
process.style.transition = 'width 100ms linear';
handle.style.transition = 'left 100ms linear';
}, 0);
}
Expand Down
2 changes: 1 addition & 1 deletion javascript/public_define.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const texts = {
preview_btn1: "更新历史",
preview_btn2: "<img class=\"link_img\" src=\"\" alt=\"\"/>提出反馈",
page_info_title1: "INFORMATION",
page_info_detail1: "Version: 4.6.0.17.Canary<br>Server Version: 4.0<br>Updated: 2024-02-28-01",
page_info_detail1: "Version: 4.6.0.20.Canary<br>Server Version: 4.0<br>Updated: 2024-02-28-03",
page_info_title2: "ABOUT US",
page_info_detail2: "<span>Developer: @Spectrollay<br>Maintainer: @Spectrollay<br>Chat Group: [<a href=\"https://t.me/Spectrollay_MCW\" target=\"_blank\" onclick=\"playSound1();\">Telegram</a>] [<a href=\"https://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=WVA6aPqtv99hiYleW7vUq5OsBIufCAB1&authKey=B0%2BaXMCTqnmQrGh0wzCZTyWTIPyHS%2FPEM5QXcFfVwroFowNnzs6Yg1er1%2F8Fekqp&noverify=0&group_code=833473609\" target=\"_blank\" onclick=\"playSound1();\">QQ</a>] [<a href=\"https://yhfx.jwznb.com/share?key=VyTE7W7sLwRl&ts=1684642802\" target=\"_blank\" onclick=\"playSound1();\">云湖</a>]<span>",
page_info_title3: "MADE WITH ❤️ IN CHINA",
Expand Down
52 changes: 52 additions & 0 deletions stylesheet/advanced.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,4 +142,56 @@ main {
}

/* Slider滑动条 */
.slider {
width: 80%; /* 进度条宽度 */
height: 8px; /* 进度条高度 */
border: 2px solid #1E1E1F;
background: #8C8D90;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px rgba(255, 255, 255, 0.2);
margin: 20px auto; /* 上下外边距20px，左右自动居中 */
position: relative; /* 相对定位，用于子元素绝对定位的参考 */
}

.slider-process {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: #3C8527;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px rgba(255, 255, 255, 0.2);
transition: width 50ms linear;
}

.slider-handle {
position: absolute; /* 绝对定位，相对于包含它的 .slider 元素 */
width: 28px; /* 滑块宽度 */
height: 28px; /* 滑块高度 */
top: 50%; /* 滑块垂直居中 */
z-index: 1;
transform: translate(-50%, -50%); /* 水平和垂直居中 */
background-color: #D0D1D4;
border: 2px solid #1E1E1F;
box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.6), inset -2px -6px rgba(255, 255, 255, 0.4);
transition: left 100ms linear;
}

.slider-handle:hover {
background-color: #B1B2B5;
box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.8), inset -2px -6px rgba(255, 255, 255, 0.6);
}

.slider-tooltip {
position: absolute; /* 绝对定位 */
bottom: -50px; /* 距离底部 40px */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 水平居中 */
}

.slider-segment {
position: absolute; /* 绝对定位 */
background-color: #333; /* 分段线颜色 */
width: 2px; /* 分段线宽度 */
height: 8px; /* 分段线高度 */
top: 50%; /* 分段线垂直居中 */
transform: translateY(-50%); /* 分段线垂直居中 */
}
10 changes: 9 additions & 1 deletion updatelog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,15 @@
<!-- span>版本类型: Preview/Insider_(Preview/Alpha/Beta)/Canary/Alpha/Beta/Pre/RC/Release/SP</span -->
</div>
<div class="banner_area">
<div class="banner information_banner">带有 * 标识的版本为不稳定版本, 可能会出现各种难以预料的问题
<div class="banner information_banner">带有 * 标识的版本为不稳定版本, 可能会出现各种难以预料的问题</div>
</div>
<div class="main">
<div class="title2">*4.6.0-Canary12(4.6.0.20)</div>
<div>2024-02-28</div>
<div class="description2">
<p>本版本基于4.5.1-Beta4(4.5.1.6)开发</p>
<li>更新了Slider滑动条的样式和实现函数</li>
<li>实验性 - 加入了Slider滑动条</li>
</div>
</div>
<div class="main">
Expand Down

0 comments on commit 017ccf8

Please sign in to comment.