jquery开关灯案例_jQuery实现开关灯效果

本文实例为大家分享了jQuery实现开关灯效果的具体代码，供大家参考，具体内容如下

效果展示

点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。

开灯：

关灯：

分析

这个功能很简单，其实就是利用jQuery实现把背景色更改为黑色和白色，可以在两者之间进行切换。

代码：

开关灯案例

#img1 {

display: block;

margin: 10px auto;

}

开灯

关灯

// 给button1添加事件,把背景色设置为白色

$('#btn1').click(function() {

$('body').css("background-color", "white");

});

// 给button2添加事件,把背景色设置为黑色

$('#btn2').click(function() {

$('body').css("background-color", "black");

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持随便开发网。