2016-10-17 6 views
-4

Okay, hier ist mein Javascript. Wenn ich die Variable angle1 zu meinem Javascript hinzufüge, stürzt es das ganze Javascript ab. basicy, was ich will, ist, dass das Bild von Jhin auf Mouseover drehen wird. und wenn die Maus losgeht, dann dreht sie sich zurück zum Original. (Unsichtbar)Javascript stürzt beim Hinzufügen einer Codezeile ab

$(document).ready(function(){ 
$("#flip").click(function(){ 
$("#panel").slideToggle("slow") 
}); 

var angle = 0, img = document.getElementById('flip'); 
    document.getElementById('flip').onclick = function() { 
    angle = (angle+180)%360; 
    img.className = "rotate"+angle; 
} 

setTimeout(function(){ 
    document.body.className=""; 
},900); 


var angle1 = 90 document.getElementById('jhin'); 
    docmument.getElementById('jhin').onclick = function() { 
    angle1 = (angle1+90)%180; 
    img.className = "rotate"+angle1; 
    } 

    }); 

function jhinIn(){ 
    document.getElementById("jhin").style.visibility = "visible"; 
} 

function jhinOff(){ 
    document.getElementById("jhin").style.visibility = "hidden"; 
} 

css:

#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; 
} 
+3

'var Winkel1 = 90 document.getElementById ('Jhin') sein;' Bitte double-check es . –

+0

'var angle1 = 90 document.getElementById ('jhin');' check it. du hast vergessen '' '' nach 'var angle1 = 90' zu setzen –

Antwort

0
var angle1 = 90 document.getElementById('jhin'); 

sollte

var angle1 = document.getElementById('jhin'); 
+0

Danke, es hat für mich geklappt .. – ImperialisticCobra

Verwandte Themen