<!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>JS 作业
原文地址：https://www.cnblogs.com/hankai2735/p/8846777.html