JS 作业
2024-10-20 05:40:25
<!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>
最新文章
- 基于C/S架构的3D对战网络游戏C++框架 _02系统设计（总体设计、概要设计）
- bzoj2141排队（辣鸡但是好写的方法）
- js中各种跨域问题实战小结（一）
- nginx 设置 fastcgi缓存
- Jenkins master在windows上安装
- poj 1182 食物链 （并查集）
- SQL Server sql 操作
- php运行步骤解析
- Number Steps
- 基于Android 下载文件时，更新UI简单帮助类
- CodeIgniter学习一：基础知识
- 用python写刷票程序
- 如何在仅主机模式下ping通网路上网
- [日常] 最近的一些破事w...
- freemaker 操作字符串
- SharePoint2007使用WebPart加载UserControl
- Vue+element组合el-table-column表头宽度自定义
- [OpenCV] Samples 17: Floodfill
- Android之用自定义的shape去实现shadow效果
- C/C++ 宏