jquery实现开关灯

开关灯.html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>开关灯</title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .off{ background-color:#000000;}
        .hidDiv{ display:none;}
        .showDiv{ display:block;
                  position:absolute;top:0px;left:0px;
                  width:1000px;height:800px;
                  border:1px solid #000;
                  background-color:Gray;
                  z-index:99;
                  filter:Alpha(Opacity=70);
                  opacity: 0.7;
         }
         #divShow{position:absolute;z-index:100;}
    </style>
    <script type="text/javascript">
        $(function () {//文档解析完后执行
            $("#btnOO").click(function () {//为id=btnOO的按钮添加一个点击事件方法
                //$("body").toggleClass("off"); //点击的时候为body 添加/移除名为off的类选择器
                if ($("#shadowDiv").attr("class") == "showDiv") {//执行关灯操作
                    $("#shadowDiv").attr("class", "hidDiv");
                } else $("#shadowDiv").attr("class", "showDiv");
            });
        })
    </script>
</head>
<body>
<div style="background:#FF0;width:900px;height:200px;">
<input type="text" />
<input type="radio" />
<input type="radio" />
<input type="checkbox" />
</div>
<div id="shadowDiv" class="hidDiv"></div>

</body>
</html>

转载于:https://www.cnblogs.com/osmond/archive/2011/12/08/2281262.html

jquery实现开关灯相关推荐

用jQuery写开关灯案例
这次我们学习的是用jQuery方法写快关灯案例,快关灯案例也就是点击按钮后切换页面的背景颜色,当我们去写案例的时候多数会使用到插件,而jQuery就是其中一种要使用插件的方法. 1.首先把快关按钮写上 ...
jquery开关灯案例_jquery图文开关灯切换特效
非常实用,从网站扣下来的,第一时间与大家分享,实现了jquery图文开关灯切换特效,使用非常简单,网友们下载下来看一下就明白了... 查看演示下载资源: 14 次下载资源下载积分: 20 积分 ...
jquery开关灯案例_jQuery实现开关灯效果
本文实例为大家分享了jQuery实现开关灯效果的具体代码,供大家参考,具体内容如下效果展示点击界面上的开灯关灯按钮,可以实现背景的调暗.方便晚上阅读. 开灯: 关灯: 分析这个功能很简单,其实就 ...
大爱jQuery，10美女模特有用jQuery/CSS3插入（集成点免费下载）
整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款非常犀利的Javascript框架,利用jQuery ...
jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法
jQuery版本的网页开关灯 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
jQuery对象和DOM对象互转的问题、jQuery文件引入问题、DOM版本的网页开关灯
jQuery对象和DOM对象互转的问题 <!DOCTYPE html> <html lang="en"> <head><meta char ...
城市智慧路灯综合管理平台、图监控、灯箱实时监控、策略管理、故障报警、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理、DIV+CSS布局设计、HTML/Bootstrp/jQuery
源码类别: 后台模板文件大小: 21.5 MB 源码内容:城市智慧路灯综合管理平台后台模板前端技术: HTML/CSS/Bootstrap/jQuery 模板语言: 简体中文 ...
jquery开关灯案例_全屋开关插座布局讲解，自己规划怕遗漏，手把手教你，很详细...
开关插座是装修内重要的一环,然而也最容易被忽视.装修完住进来后才发现插口不够用,插座被家具挡住,想改还得砸墙,没办法只能用拖线板.然而,满屋都是拖线板,乱糟糟的,看着就惹人烦,还容易绊倒人,有安全隐患 ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

jquery实现开关灯

jquery实现开关灯相关推荐

最新文章

热门文章