jQuery實現(xiàn)開關燈效果
更新時間：2020年08月02日 09:39:40 作者：veejaLiu
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)開關燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)開關燈效果的具體代碼，供大家參考，具體內容如下
效果展示
點擊界面上的開燈關燈按鈕，可以實現(xiàn)背景的調暗。方便晚上閱讀。
開燈：
關燈：
分析
這個功能很簡單，其實就是利用jQuery實現(xiàn)把背景色更改為黑色和白色，可以在兩者之間進行切換。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>開關燈案例</title>
<style type="text/css">
#img1 {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<button id="btn1" type="button">開燈</button>
<button id="btn2" type="button">關燈</button>
<br>
<img id="img1" src="imgs/demo1.JPG">
</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 給button1添加事件,把背景色設置為白色
$('#btn1').click(function() {
$('body').css("background-color", "white");
});
// 給button2添加事件,把背景色設置為黑色
$('#btn2').click(function() {
$('body').css("background-color", "black");
});
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了jquery dialog獲取焦點的方法,結合實例形式分析了jQuery UI插件對話框dialog的基本使用技巧,需要的朋友可以參考下2017-02-02
利用jQuery實現(xiàn)滑動開關按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關按鈕效果，文中給出了詳細的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。2017-02-02
當用戶需要某項功能時要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04
這篇文章主要介紹了jquery 判斷滾動條到達了底部和到達頂端的方法,需要的朋友可以參考下2014-04-04![[jQuery] 事件和動畫詳解](http://img.jbzj.com/images/xgimg/bcimg4.png)
這篇文章主要介紹了JQ事件和動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了jQuery實現(xiàn)的超簡單點贊效果,結合實例形式分析了jQuery實現(xiàn)點贊功能的具體步驟與相關技巧,需要的朋友可以參考下2015-12-12
Jquery Easyui進度條組件Progress使用詳解（8）
這篇文章主要為大家詳細介紹了Jquery Easyui進度條組件Progress的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。2015-02-02
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結合實力形式分析了jQuery事件響應及json文件的加載、讀取、遍歷等相關操作技巧,需要的朋友可以參考下2019-01-01
基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07