new file: jpg/11.jpg

new file:   jpg/12.jpg
	new file:   jpg/13.jpg
	new file:   jpg/14.jpg
	new file:   jpg/15.jpg
	modified:   script.js
	modified:   styles.css

script.js

@@ -35,9 +35,9 @@ $(document).ready(function() {
 
         $(".tab").find(".addTab").before(newTabButton);
         $("body").append(newTabContent);
-
         // 绑定新添加的选项卡按钮和删除按钮的事件
         bindTabEvents();
+        updateContentOpacity(slider.val());
     });
 
     // 删除选项卡
@@ -51,7 +51,6 @@ $(document).ready(function() {
         // 删除当前标签页
         $("#" + tabName).remove();
         $("button[data-tab='" + tabName + "']").remove();
-
         // 如果删除的是当前活动的标签页
         if (tabName === activeTab) {
             // 显示上一个标签页
@@ -277,15 +276,19 @@ $(document).ready(function() {
 $(document).ready(function() {
     const slider = $('#mySlider');
     const sliderValue = $('#sliderValue');
-
+    //const content = $('.tabcontent');
     // 初始化显示滑块的值
     sliderValue.text(slider.val());
-
+    updateContentOpacity(slider.val());
     // 监听滑块值的变化
     slider.on('input', function() {
-        sliderValue.text(slider.val());
+        const value = slider.val();
-    });
+        sliderValue.text(value);
+        updateContentOpacity(value);});
 });
+    function updateContentOpacity(value) {
+        $('.tabcontent').css('--content-opacity', value / 100);
+    }
 });
 $(document).ready(function() {
     $('#closeButton').click(function() {

styles.css

@@ -1,7 +1,8 @@
-/* 选项卡按钮样式 */
+:root {
-.tabcontent {
+    --content-opacity: 0.5; /* 定义透明度变量 */
-    text-align: center; /* 使“日期”居中显示 */
 }
+
+/* 选项卡按钮样式 */
 .tab {
     overflow: hidden;
     border: 1px solid #ff69b4; /* 粉色边框 */
@@ -45,11 +46,12 @@
 
 /* 选项卡内容样式 */
 .tabcontent {
+    text-align: center; /* 使“日期”居中显示 */
     display: none;
     padding: 6px 12px;
     border: 1px solid #ff69b4; /* 粉色边框 */
     border-top: none;
-    background-color: #fff; /* 白色背景 */
+    background-color: rgba(255, 255, 255, var(--content-opacity)); /* 白色背景 */
 }
 
 /* 删除按钮样式 */
@@ -71,7 +73,7 @@
 img{height: auto; width: auto\9; width:28%;}
 
 .cldBody {
-    background: #f7f7f7;
+    background-color: rgba(255, 255, 255, var(--content-opacity));
     width: 420px;
     margin: 10px auto;
 }
@@ -93,9 +95,10 @@ td {
     line-height: 60px;
     text-align: center;
     font-size: 20px;
+    background-color: rgba(255, 255, 255, var(--content-opacity));
 }
 #tbody td:hover {
-    background: #ededed;
+    background: rgba(30, 30, 30, 0.2);
     cursor: pointer;
 }
 .curDate {