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");

});

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

jquery开关灯案例_jQuery实现开关灯效果相关推荐

jquery开关灯案例_jquery图文开关灯切换特效
非常实用,从网站扣下来的,第一时间与大家分享,实现了jquery图文开关灯切换特效,使用非常简单,网友们下载下来看一下就明白了... 查看演示下载资源: 14 次下载资源下载积分: 20 积分 ...
jquery 立体走马灯_Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解照例先上代码: HTML: 在中,再包含了一个div,且设置了一个很比较大的宽度,是为了解决一个 ...
JS基础-开关灯案例
要达到的效果图展示初始状态点击关灯之后变为再点开灯又变为第一个状态. 整体思路:首先设置初始的状态body的背景色为白色,按钮中的文字为关灯,初始状态默认是开着灯的,然后设置一个初始的flag变 ...
JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
前端工程师之jquery实战案例大集合-彭亮-专题视频课程
前端工程师之jquery实战案例大集合-17028人已学习课程介绍详细介绍了一个js类库的实战应用,这里主要讲解jquery.是一个可以很容易就做各种网页特效的面相对象的方法函数集 ...
jQuery常见案例
jQuery常见案例通过jQuery实现全选,反选取消: 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> <inpu ...
竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
一款jQuery实现重力弹动模拟效果特效,弹弹弹，弹走IE6
2019独角兽企业重金招聘Python工程师标准>>> 一款jQuery实现重力弹动模拟效果特效鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现 ...

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

jquery开关灯案例_jQuery实现开关灯效果相关推荐

最新文章

热门文章