diff --git a/README.md b/README.md index 9c36247..c31ae7e 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,8 @@ 17. 层叠图添加辅助线 18. 可添加多个文本框,以及文本框删除功能 19. 添加图片编辑器工具栏,图片编辑器与文本编辑器共用同一位置工具栏,选中对应元素切换对应编辑面板,点击空白处隐藏面板 -20. 当选择文字的时候工具栏对应出现文字编辑器,当选择图片的时候工具栏对应出现图片编辑器,点击其他位置时隐藏工具栏 +20. 当选择文字的时候工具栏对应出现文字编辑器,当选择图片的时候工具栏对应出现图片编辑器,点击其他位置时隐藏工具栏,两个编辑栏的宽高保持和文本编辑器工具栏一致 + diff --git a/css/style.css b/css/style.css index c112771..b003499 100644 --- a/css/style.css +++ b/css/style.css @@ -82,7 +82,7 @@ html, body { /* 编辑器工具栏(文本/图片共用) */ .editor-toolbar { position: absolute; - top: 49px; + top: 65px; left: 0; right: 0; display: flex; diff --git a/index.html b/index.html index d9e979e..f42207e 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,7 @@ diff --git a/js/script.js b/js/script.js index 3ca8f8e..003c70d 100644 --- a/js/script.js +++ b/js/script.js @@ -18,6 +18,7 @@ const textTools = document.getElementById('textTools'); const imageTools = document.getElementById('imageTools'); const opacitySlider = document.getElementById('opacitySlider'); + const opacityValue = document.getElementById('opacityValue'); const boldBtn = document.getElementById('boldBtn'); const italicBtn = document.getElementById('italicBtn'); const colorPicker = document.getElementById('colorPicker'); @@ -108,6 +109,7 @@ opacitySlider.addEventListener('input', (e) => { if (selectedOverlay) { selectedOverlay.style.opacity = e.target.value / 100; + opacityValue.textContent = e.target.value + '%'; } }); @@ -525,6 +527,7 @@ // 更新透明度滑块为当前层叠图的透明度 const currentOpacity = overlayEl.style.opacity || '1'; opacitySlider.value = parseFloat(currentOpacity) * 100; + opacityValue.textContent = opacitySlider.value + '%'; } // 计算图片滑动边界