Javascript在添加一行代码时崩溃
好的,这是我的javascript。 当我将变量angle1添加到javascript中时,会使整个javascript崩溃。基本上我想要的是,jhin的图像会在鼠标上方旋转。当鼠标离开jhin时,它会旋转回到原来的位置。(看不见) css: 应该是Javascript在添加一行代码时崩溃,javascript,html,css,ccss,Javascript,Html,Css,Ccss,好的,这是我的javascript。 当我将变量angle1添加到javascript中时,会使整个javascript崩溃。基本上我想要的是,jhin的图像会在鼠标上方旋转。当鼠标离开jhin时,它会旋转回到原来的位置。(看不见) css: 应该是 var angle1 = document.getElementById('jhin'); var angle1=90 document.getElementById('jhin')请仔细检查。var angle1=90 document.get
var angle1 = document.getElementById('jhin');
var angle1=90 document.getElementById('jhin')代码>请仔细检查。var angle1=90 document.getElementById('jhin')代码>检查它。你忘了放代码>之后var angle1=90
#container {
width: 1000px;
height: 1000px;
background-color: #700000;
margin: auto;
position: relative;
}
#mondriaan1 {
position: absolute;
height: 100px;
width: 990px;
background-color: #FFFFFF;
bottom: 0px;
left: 0px;
border-color: black;
border-width: 5px;
border-style: solid;
}
#mondriaan2 {
position: absolute;
height: 800px;
width: 100px;
background-color: #FFFFFF;
left: 0px;
bottom: 105px;
border-color: black;
border-width: 5px;
border-style: solid;
}
#mondriaan3 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
top: 0px;
left: 0px;
width: 400px;
height: 85px;
position: absolute;
}
#mondriaan4 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
top: 90px;
left: 105px;
width: 400px;
height: 600px;
}
#mondriaan5 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
bottom: 105px;
left: 105px;
width: 350px;
height: 191px;
}
#mondriaan6 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
bottom: 105px;
left: 460px;
width: 401px;
height: 100px;
}
#mondriaan7 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
bottom: 210px;
left: 460px;
width: 250px;
height: 84px;
}
#mondriaan8 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
right: 0px;
bottom: 105px;
width: 126px;
height: 400px;
}
#mondriaan9 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FF3333;
position: absolute;
right: 0px;
width: 126px;
height: 485px;
top: 0px;
}
#mondriaan10 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
right: 131px;
width: 145px;
height: 350px;
bottom: 210px;
}
#mondriaan11 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
right: 281px;
width: 199px;
height: 400px;
bottom: 300px;
}
#mondriaan12 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
right: 281px;
width: 199px;
height: 195px;
top: 90px;
}
#mondriaan13 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
left: 405px;
width: 454px;
height: 85px;
top: 0px;
}
#mondriaan14 {
border-color: black;
border-width: 5px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
right: 131px;
width: 145px;
height: 335px;
top: 90px;
}
#panel {
height: 598px;
width: 396px;
top: 0px;
left: 0px;
background-color: red;
border: black;
border-width: 3px;
border-style: solid;
border-color: #black;
background-color: #FFFF00;
display: none;
text-align: center;
}
#flip {
cursor: pointer;
left: 176px;
width: 25px;
height: 25px;
position: absolute;
}
#link {
color: black;
font-weight: bold;
}
#flip {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#flip.rotate180 {
animation-name: rotate180;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes rotate180 {
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
@keyframes rotate {
0% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}
#jhin {
width: 199px;
height: 400px;
visibility: hidden;
}
#jhin.rotate90 {
animation-name: jhin90;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes jhin90 {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(180deg);}
}
@keyframes jhin180 {
0% {transform: rotateY(180deg);}
100% {transform: rotateY(90deg);}
}
#jhin.rotate180 {
animation-name: jhin180;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
var angle1 = 90 document.getElementById('jhin');
var angle1 = document.getElementById('jhin');