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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现动态操作table行
Nov 23 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
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
javascript编写简易计算器
2017/05/06 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python 串口通信的实现
2020/09/29 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
计算机专业求职信
2014/06/02 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL