jQuery实现开关灯效果


Posted in jQuery onAugust 02, 2020

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

效果展示

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

开灯:

jQuery实现开关灯效果

关灯:

jQuery实现开关灯效果

分析

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

代码:

<!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 相关文章推荐
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
jquery实现简单自动轮播图效果
Jul 29 #jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
nodeJS微信分享
2017/12/20 NodeJs
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python删除特定文件的方法
2015/07/30 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python中的常量和变量代码详解
2018/07/25 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python能自学吗
2020/06/18 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
年度考核自我鉴定
2013/11/09 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
十月围城观后感
2015/06/08 职场文书
请假条应该怎么写?
2019/06/24 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Python Django模型详解
2021/10/05 Python