JQuery实现灯泡开关

在这个示例中，我们将使用jQuery来创建一个简单的灯泡开关。这个灯泡开关将使用CSS3动画来改变其外观，并且会在用户点击时切换状态。

HTML部分：

<div class="switch-container">
    <label class="switch">
        <input type="checkbox" id="light-switch">
        <span class="slider round"></span>
    </label>
</div>

CSS部分：

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider.round:before {
  border-radius: 50%;
}
 
/* When the checkbox is checked, the slider changes position */
.switch input:checked + .slider {
  background-color: #2196F3;
}
 
/* On mouse-over, add a background color */
.switch:hover .slider {
  background-color: #2196F3;
}
 
/* When the slider is active, add a background color */
.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #2196F3;
}

jQuery部分：

$(document).ready(function(){
    $("#light-switch").change(function() {
        if(this.checked) {
            // 灯泡开启时的操作
            console.log("灯泡已开启");
            // 例如，可以在这里添加开灯后的CSS效果或动画
        } else {
            // 灯泡关闭时的操作
            console.log("灯泡已关闭");
            // 例如，可以在这里添加关灯后的CSS效果或动画
        }
    });
});

这个灯泡开关的基本功能已经实现，你可以在console.log中添加你的自定义逻辑来处理灯泡开启和关闭时的操作。如果你需要更复杂的交互，可以添加更多CSS动画或者JavaScript代码来增强用户体验。