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>

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

时间: 2020-07-31

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实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

jQuery实现简单的点赞效果

本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下 效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener

jquery超简单实现手风琴效果的方法

本文实例讲述了jquery超简单实现手风琴效果的方法.分享给大家供大家参考.核心代码如下: $("#accordion .expanded").hide(); $("a.opening").click(function(){ $(this).next().slideToggle('fast', function(){ $(this).prev("a.opening").toggleClass("active"); }); re

jquery实现简单手风琴菜单效果实例

本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: (function($) { var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery); HTML代

js实现的简单图片浮动效果完整实例

本文实例讲述了js实现的简单图片浮动效果.分享给大家供大家参考,具体如下: 利用window对象,实现一个图片的浮动效果 1.现有一个广告div,就是我们要控制的,它的起始点(0,0) 2.设定横向和纵向的速度 3.控制广告div移动 1)广告div是否达到边界   2)如果到达边界后,我们设置速度反向移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

利用jQuery实现简单的拖曳效果实例代码

前言 本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作. 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现 相应的注释在文中已有体现,请认真观看,你可以理解的. 先定义一个对象 dr

jQuery实现简单滚动动画效果

动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html> 先添加两个<a>元素作为按钮.然后对<a>元素进行补充: <html> <bo

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> <title></title

jQuery实现简单的手风琴效果

实现手风琴效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp"> <div class="voice_2"> <ul> <li class="li1" id="li1"> <div class="fold" style="dis