<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业</title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } #tc{ width: 100px; height: 30px; } #taozi{ width:100px; height: 70px; border: 1px solid transparent; text-align: center; line-height: 70px; } #taozi1{ width: 150px; height: 70px; border: 1px solid transparent; text-align: center; line-height: 70px; } #xsys{ width: 150px; height: 70px; background-color: cornflowerblue; color: white; border-radius: 10px; text-align: center; line-height: 70px; display: none; } .three{ width: 1000px; height: 30px; color: blue; transition: 2s; } .four{ width: 700px; height: 300px; color: white; background-color: red; transition: 2s; } #waiceng{ width: 1350px; background-color: lightblue; overflow: hidden; } .neiceng{ width: 1000px; height: 100px; background-color: white; margin-top: 30px; box-shadow: 1px 5px gray; border: 1px solid lightgray; } #wangyehuanfu{ width: 300px; height: 50px; } #yangshi1{ width: 76px; height: 45px; color: white; background-color: blue; text-align: center; line-height: 45px; float: left; border-radius: 15px; } #yangshi2{ width: 76px; height: 45px; color: white; background-color: blue; text-align: center; line-height: 45px; float: left; margin-left: 30px; border-radius: 15px; } #topan{ border-radius: 15px; width: 76px; height: 45px; color: white; background-color: blue; text-align: center; line-height: 45px; } #bottoman{ border-radius: 15px; width: 76px; height: 45px; color: white; background-color: green; text-align: center; line-height: 45px; display: none; } .anceng{ width: 800px; height: 100px; border-right: 5px solid darkcyan; position: absolute; margin: 0 0; z-index: -1; } .mingceng{ width: 800px; height: 100px; position: absolute; margin: 0 0; z-index: 1; } .ganceng{ width: 1000px; height: 100px; position: absolute; box-shadow: 0px 10px darkgray; margin: 0 0; z-index: -1; } </style> </head> <body> <div id="waiceng"> <div class="neiceng"> 1 说明事件 <div id="tc" onclick="tanchu()"> 按钮 </div> </div> <div class="neiceng"> 2 鼠标移入下面显示按钮 <div id="taozi"onmousemove="xianshi()" onmouseout="xiaoshi()"> <div id="taozi1"><input type="button" value="   "/>鼠标经过显示按钮</div> <div id="xsys" > 按钮 </div> </div> </div> <div class="neiceng" style="height:300px ;"> <div class="three" onmousemove="zg()" onmouseout="ka()">3 鼠标经过变窄变高，移出再恢复</div> </div> <div class="neiceng"> <div class="mingceng" onmouseover="cxac()" > 4 鼠标经过就弹出层（函数、变量） </div> <div class="anceng" onmouseout="cxmc()"> 4 鼠标经过就弹出层（函数、变量） </div> </div> <div class="neiceng"> <div class="mingceng" onclick="dtc1()"> 5 鼠标点击就弹出层（函数、变量、判断） </div> <div class="ganceng" onclick="dtc2()" > 5 鼠标点击就弹出层（函数、变量、判断） </div> </div> <div class="neiceng"> 6 网页换肤 <div id="wangyehuanfu"> <div id="yangshi1" onclick="ys1()">样式1</div> <div id="yangshi2" onclick="ys2()">样式2</div> </div> </div> <div class="neiceng"> 7 显示隐藏 <div id="topan" onclick="xsyc()">显示隐藏</div> <div id="bottoman">显示隐藏</div> </div> </div> </body> </html> <script type="text/javascript"> window.onload=function(){ } function tanchu(){ alert("弹出窗口"); } function xianshi(){ document.getElementById("xsys").style.display = "block"; document.getElementById("taozi1").style.display="none"; } function xiaoshi(){ document.getElementById("xsys").style.display = "none"; document.getElementById("taozi1").style.display="block"; } function zg(){ var zg = document.getElementsByClassName("three"); zg[0].className = "four"; } function ka(){ var ka = document.getElementsByClassName("four"); ka[0].className = "three"; } function ys1(){ document.getElementById("waiceng").style.backgroundColor = "yellowgreen" } function ys2(){ document.getElementById("waiceng").style.backgroundColor = "grey" } function xsyc(){ if(document.getElementById("bottoman").style.display == "none"){ document.getElementById("bottoman").style.display = "block" }else{ document.getElementById("bottoman").style.display = "none" } } function cxac(){ document.getElementsByClassName("anceng")[0].style.zIndex = "10" document.getElementsByClassName("mingceng")[0].style.zIndex = "-1" } function cxmc(){ document.getElementsByClassName("anceng")[0].style.zIndex = "-1" document.getElementsByClassName("mingceng")[0].style.zIndex = "10" } function dtc1(){ document.getElementsByClassName("ganceng")[0].style.zIndex = "10" document.getElementsByClassName("mingceng")[1].style.zIndex = "-1" } function dtc2(){ document.getElementsByClassName("ganceng")[0].style.zIndex = "-1" document.getElementsByClassName("mingceng")[1].style.zIndex = "10" } </script>