자바 스크립트에서 onlick 버튼 액션을 통해 CSS 내부의 움직이는 텍스트

나는 자바 스크립트가 새로 작성되었으며 학교 수업을 마치는 데 어려움이 따른다.자바 스크립트에서 onlick 버튼 액션을 통해 CSS 내부의 움직이는 텍스트

파란색 사각형 형상으로 그냥 터치처럼 우측의 버튼을 클릭 한 후 페이지 상단부터 아래로 가서, 그 후 botttom에 도달하는

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    background-color: white; 
    width: 200px; 
    border: 25px solid blue; 
    padding: 25px; 
    margin: 25px; 
    position: relative; 
    left: 35%; 
} 
h2 { 
    text-align: center; 
    } 
</style> 
<body> 
<br><br> 
<button onclick="myFunction()">Sunday</button><br> 
<button onclick="myFunction2()">Monday</button><br> 
<button onclick="myFunction3()">Tuesday</button><br> 
<button onclick="myFunction4()">Wednesday</button><br> 
<button onclick="myFunction5()">Thursday</button><br> 
<button onclick="myFunction6()">Friday</button><br> 
<button onclick="myFunction7()">Saturday</button><br> 
<p id="demo"></p> 

<script> 
function myFunction() { 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
} 
function myFunction2() { 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
} 
function myFunction3() { 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
} 
function myFunction4() { 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
} 
function myFunction5() { 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
} 
function myFunction6() { 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
} 
function myFunction7() { 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
} 
</script> 

</body> 
</html>

, 색상 : 이 내 현재 코드입니다 상자의 반전이 필요합니다. 내가 아는 것은 선택 윤곽 (marquee)이지만 적절한 코드를 모른다. 나는 이것이 많은 것을 알고있다. 그래서 나는 도움을 청한다. 의견 부탁드립니다 :) 감사

출처

2016-12-14 maymail09

당신은 단지 첫 번째 단추를 클릭 한 후 아래로 슬라이드 상자를 원한다면,이 코드는 당신을 위해 그것을 할 것입니다 :이 비록

function myFunction() { 
 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#40A824"; 
 
} 
 
function myFunction2() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#003399"; 
 
} 
 
function myFunction3() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#9233DF"; 
 
} 
 
function myFunction4() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#CA4B98"; 
 
} 
 
function myFunction5() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5DA233"; 
 
} 
 
function myFunction6() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5B1C5A"; 
 
} 
 
function myFunction7() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#F4292A"; 
 
}

div { 
 
    background-color: white; 
 
    width: 200px; 
 
    border: 25px solid blue; 
 
    padding: 25px; 
 
    margin: 25px; 
 
    position: relative; 
 
    left: 35%; 
 
} 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
#demo { 
 
    position: absolute; 
 
    margin-top: -387px; 
 
    transition: .5s; 
 
}

<br><br> 
 
<button onclick="myFunction()">Sunday</button><br> 
 
<button onclick="myFunction2()">Monday</button><br> 
 
<button onclick="myFunction3()">Tuesday</button><br> 
 
<button onclick="myFunction4()">Wednesday</button><br> 
 
<button onclick="myFunction5()">Thursday</button><br> 
 
<button onclick="myFunction6()">Friday</button><br> 
 
<button onclick="myFunction7()">Saturday</button><br> 
 
<p id="demo"></p>

을 전체 화면 브라우저에서 작동하지만 크기가 다른 여러 화면에 대한 안정적인 솔루션이 아닙니다. 코드 스 니펫을 실행하면 원하지 않는 결과가 발생하므로 코드를 복사하여 HTML 페이지에 붙여 넣는 것이 좋습니다.

출처

2016-12-14 15:07:08

자바 스크립트에서 onlick 버튼 액션을 통해 CSS 내부의 움직이는 텍스트

답변

관련 문제