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>

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

赞 (0)

相关推荐

  • JS/jQuery实现简单的开关灯效果【案例】

    JS/jQuery实现简单的开关灯效果【案例】

    本文实例讲述了JS/jQuery实现简单的开关灯效果.分享给大家供大家参考,具体如下: 实现效果: html结构只有两个button标签 <button id="left">开灯</button> <button id="right">关灯</button> 方法一:用原生js来做 <script> //1.获取页面元素 var left=document.getElementById('left'); v

  • jQuery实现开关灯效果

    本文实例为大家分享了jQuery实现开关灯效果的具体代码,供大家参考,具体内容如下 效果展示 点击界面上的开灯关灯按钮,可以实现背景的调暗.方便晚上阅读. 开灯: 关灯: 分析 这个功能很简单,其实就是利用jQuery实现把背景色更改为黑色和白色,可以在两者之间进行切换. 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开关灯案例</titl

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • jquery实现手风琴效果实例代码

    复制代码 代码如下: //jquery实现手风琴效果  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • jquery拖动层效果插件用法实例分析(附demo源码)

    本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l

  • 完美JQuery图片切换效果的简单实现

    完美JQuery图片切换效果的简单实现

    效果如下: css: body { font-family:"Microsoft Yahei"; } body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{po

  • 调用jQuery滑出效果时闪烁的解决方法

    问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

  • 原生js仿jquery animate动画效果

    原生js仿jquery animate动画效果

    jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

  • js以及jquery实现手风琴效果

    最近又复习了jQuery的知识,既然jQuery是javascript的一个库.jQuery能做到的事情javascript也能做到.因此用这两种方法实现了图片手风琴效果. 按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!(^__^) 嘻嘻-- 先看一下javascript的代码吧: div布局:注意哦,里面的图片我们用js代码生成 <div id="box"> <ul> <li></li> <li></l

随机推荐