diff --git a/css/style.css b/css/style.css index 76181f7..9a62c9b 100644 --- a/css/style.css +++ b/css/style.css @@ -233,6 +233,14 @@ html, body { margin: 0; } +.rotate-slider { + width: 100px; + height: 32px; + cursor: pointer; + accent-color: #4a90e2; + margin: 0; +} + /* 字号滚轮选择器 */ .roller-picker { display: flex; diff --git a/index.html b/index.html index 2f0832a..7a3ffaa 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,12 @@ 100% +
+
diff --git a/js/script.js b/js/script.js index 42b119f..48c1bc9 100644 --- a/js/script.js +++ b/js/script.js @@ -21,6 +21,8 @@ const bgTools = document.getElementById('bgTools'); const opacitySlider = document.getElementById('opacitySlider'); const opacityValue = document.getElementById('opacityValue'); + const rotateSlider = document.getElementById('rotateSlider'); + const rotateValue = document.getElementById('rotateValue'); const bgScaleSlider = document.getElementById('bgScaleSlider'); const bgScaleValue = document.getElementById('bgScaleValue'); const bgOpacitySlider = document.getElementById('bgOpacitySlider'); @@ -125,6 +127,15 @@ } }); + // 旋转滑块 + rotateSlider.addEventListener('input', (e) => { + if (selectedOverlay) { + const rotateDeg = e.target.value; + selectedOverlay.style.transform = `rotate(${rotateDeg}deg)`; + rotateValue.textContent = rotateDeg + '°'; + } + }); + // 背景图缩放滑块 bgScaleSlider.addEventListener('input', (e) => { bgImageScale = e.target.value / 100; @@ -622,6 +633,13 @@ const currentOpacity = overlayEl.style.opacity || '1'; opacitySlider.value = parseFloat(currentOpacity) * 100; opacityValue.textContent = opacitySlider.value + '%'; + + // 更新旋转滑块为当前层叠图的旋转角度 + const currentTransform = overlayEl.style.transform || ''; + const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/); + const currentRotate = rotateMatch ? parseFloat(rotateMatch[1]) : 0; + rotateSlider.value = currentRotate; + rotateValue.textContent = currentRotate + '°'; } // 计算图片滑动边界