Onload 페이지 div 슬라이드가 여유 공간으로 표시됩니다.

Question

div (class = "top")를 위로부터 슬라이드하려면 -300px; 상단 : 40px; 좋은 완화와 함께. 예를 찾을 수 없습니다. 부하 페이지에서이 작업을 수행하는 방법을 아는 사람이 있습니까?

Answer 1

는 여기 자바 스크립트와 CSS3 일부 :

자바 스크립트 :

<script> 
document.getElementById("slide").style.top="40px"; 
</script> 

그리고 CSS : 아이디 "슬라이드"를 가지고해야 미끄러

-webkit-transition:all 1s;-ms-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s; 

요소입니다. 또한 상단에 "position : absolute; top : -300px"가 있어야 CSS에서 -300px가됩니다. 추가 할 수도 있습니다 "왼쪽 : 20 %;" 또는 뭔가를 CSS에 표시하여 더보기 좋게 만드십시오. 무엇이든지 당신의 디자인과 함께 작동합니다. CSS 전환 속성을 찾아야합니다. 특수 효과에 아주 좋습니다. 이 경우, 슬라이드하기 위해 1 초가 걸렸습니다. 당신은 언제나 그것을 바꿀 수 있습니다.

JavaScript 라이브러리 인 jQuery을 사용하여 구현할 수도 있지만 (더 적은 코드가 필요함) 일반적인 JavaScript와 CSS를 사용하면 도움이됩니다.

위 코드의 데모는 jsFiddle입니다.

아, 그리고 도움이된다면이 질문을 답으로 표시하십시오. 그것은 나에게 특권을 주며 나에게 더 많은 평판을 줄 것이다.

희망이 도움이되었습니다!