JQuery实现开关灯效果以及图片的显示背景变暗

来源：互联网发布：999gbgb最新域名编辑：程序博客网时间：2024/05/02 11:15

<!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>
    <script src="jquery-1.5.1.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>
<input type="text" />
<input type="radio" />
<input type="radio" />
<input type="checkbox" />

</body>
</html>