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