拉动开关点亮灯泡HTML5特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147427019

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拉动开关点亮灯泡特效</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
margin-bottom: 30px;
}

.light-container {
position: relative;
width: 200px;
height: 300px;
margin-bottom: 50px;
}

.bulb {
width: 120px;
height: 120px;
background-color: #f5f5f5;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.bulb.on {
background-color: #ffff99;
box-shadow: 0 0 50px #ffff99, 0 0 100px rgba(255, 255, 153, 0.5);
}

.bulb-base {
width: 60px;
height: 40px;
background-color: #ccc;
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px 5px 0 0;
}

.bulb-neck {
width: 20px;
height: 80px;
background-color: #aaa;
position: absolute;
top: 160px;
left: 50%;
transform: translateX(-50%);
}

.switch-container {
width: 100px;
height: 50px;
background-color: #ddd;
border-radius: 25px;
position: relative;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}

.switch-container.on {
background-color: #4CAF50;
}

.switch {
width: 46px;
height: 46px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.switch.on {
left: 52px;
}

.footer {
margin-top: 50px;
color: #666;
font-size: 14px;
}

.footer a {
color: #4CAF50;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>拉动开关点亮灯泡</h1>

<div class="light-container">
<div class="bulb" id="bulb"></div>
<div class="bulb-base"></div>
<div class="bulb-neck"></div>
</div>

<div class="switch-container" id="switchContainer">
<div class="switch" id="switch"></div>
</div>

<div class="footer">

</div>

<script>
const switchContainer = document.getElementById('switchContainer');
const switchBtn = document.getElementById('switch');
const bulb = document.getElementById('bulb');
let isOn = false;

switchContainer.addEventListener('click', function() {
isOn = !isOn;

if (isOn) {
switchContainer.classList.add('on');
switchBtn.classList.add('on');
bulb.classList.add('on');
} else {
switchContainer.classList.remove('on');
switchBtn.classList.remove('on');
bulb.classList.remove('on');
}
});

// 添加拖拽功能
let isDragging = false;
let startX = 0;
let currentX = 0;

switchBtn.addEventListener('mousedown', function(e) {
isDragging = true;
startX = e.clientX;
currentX = switchBtn.offsetLeft;
e.preventDefault();
});

document.addEventListener('mousemove', function(e) {
if (!isDragging) return;

const deltaX = e.clientX - startX;
let newX = currentX + deltaX;

// 限制拖动范围
newX = Math.max(2, Math.min(newX, 52));

switchBtn.style.left = newX + 'px';

// 根据位置判断开关状态
const threshold = 27;
const newIsOn = newX > threshold;

if (newIsOn !== isOn) {
isOn = newIsOn;
if (isOn) {
switchContainer.classList.add('on');
bulb.classList.add('on');
} else {
switchContainer.classList.remove('on');
bulb.classList.remove('on');
}
}
});

document.addEventListener('mouseup', function() {
if (!isDragging) return;
isDragging = false;

// 动画回到最终位置
if (isOn) {
switchBtn.style.left = '52px';
} else {
switchBtn.style.left = '2px';
}
});

// 触摸设备支持
switchBtn.addEventListener('touchstart', function(e) {
isDragging = true;
startX = e.touches[0].clientX;
currentX = switchBtn.offsetLeft;
e.preventDefault();
});

document.addEventListener('touchmove', function(e) {
if (!isDragging) return;

const deltaX = e.touches[0].clientX - startX;
let newX = currentX + deltaX;

newX = Math.max(2, Math.min(newX, 52));

switchBtn.style.left = newX + 'px';

const threshold = 27;
const newIsOn = newX > threshold;

if (newIsOn !== isOn) {
isOn = newIsOn;
if (isOn) {
switchContainer.classList.add('on');
bulb.classList.add('on');
} else {
switchContainer.classList.remove('on');
bulb.classList.remove('on');
}
}
});

document.addEventListener('touchend', function() {
if (!isDragging) return;
isDragging = false;

if (isOn) {
switchBtn.style.left = '52px';
} else {
switchBtn.style.left = '2px';
}
});
</script>
</body>
</html>