자바스크립트로 슬라이드쇼 효과를 만드는 방법
- 清浅원래의
- 2019-02-16 13:17:265009검색
Javascript의 Revealjs 프레임워크를 통해 슬라이드 효과를 얻을 수 있습니다. 섹션 태그를 사용하여 단일 페이지 슬라이드를 만들고 여기에 텍스트와 그림을 추가할 수 있습니다.
[추천 과정: JavaScript 튜토리얼 】
JavaScript 언어를 사용하여 슬라이드 효과를 구현하려면 프레임워크인 discover.js 프레임워크를 사용해야 합니다. 다음으로 기사에서는 구체적인 예를 통해 슬라이드 효과를 구현하는 방법을 설명합니다
reveal.js Framework 소개
reveal.js 프레임워크는 HTML 코드를 통해 아름다운 슬라이드쇼 효과를 쉽게 만들 수 있도록 도와주는 프레임워크입니다. 우리가 일상 업무에서 사용하는 PPT 슬라이드와 똑같습니다. Reveal.js는 다른 자바스크립트 라이브러리에 의존하지 않는 프레임워크로, 독립적인 자바스크립트 플러그인 라이브러리라고 할 수 있습니다. 다양한 슬라이드 전환 효과를 제공하며 훌륭한 프레젠테이션 프레임워크입니다.
reveal.js 프레임워크 다운로드 주소: https://github.com/hakimel/reveal.js
(1) Reveal.js 프레임워크를 다운로드하고 html 파일
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=".\reveal.js-master\css\reveal.css"> <!-- 引入主题 --> <link rel="stylesheet" href=".\reveal.js-master\css\theme\moon.css"> <!-- 用于显示代码高亮 --> <link rel="stylesheet" href=".\reveal.js-master\lib\css\zenburn.css"> </head> <body> <script type="text/javascript" src=".\reveal.js-master\js\reveal.js"></script> </body> </html>
( 2) 외부 파일이 도입된 후 슬라이드쇼 만들기를 시작합니다.
먼저 html 페이지에 두 개의 div 블록 수준 요소를 만듭니다. 공개 및 슬라이드 클래스 이름을 사용해야 합니다. 그런 다음 div의 두 번째 레이어에 섹션 태그를 만들어 슬라이드 페이지를 생성합니다. HTML 페이지가 빌드된 후에는 js 코드에서 페이지를 초기화해야 합니다. 이렇게 간단한 슬라이드쇼 효과가 완성되었습니다
아래와 같습니다.
<div class="reveal" style="width:450px;height:300px;border: 1px solid #fff;margin:250px auto;">
<div class="slides">
<section>
<h1>幻灯片1</h1>
<p>幻灯片正文</p>
</section>
<section>
<h1>幻灯片2</h1>
<p>幻灯片正文</p>
</section>
</div>
</div>
<script type="text/javascript" src="./reveal.js-master/js/reveal.js"></script>
<script type="text/javascript">Reveal.initialize();</script>효과 그림은 다음과 같습니다.
코드에서 섹션은 슬라이드의 페이지입니다. 아래 그림과 같이 섹션에 세로 슬라이드쇼로 표시됩니다
원하는 효과에 따라 슬라이드쇼에 텍스트, 그림 등을 추가할 수도 있습니다. 슬라이드쇼의 색상, 스타일 등은 변경될 수 있습니다
요약: 위의 내용이 이 기사의 모든 내용입니다. 이 기사가 모든 사람이 JavaScript를 사용하여 슬라이드쇼 효과를 만드는 방법을 배우는 데 도움이 되기를 바랍니다.
위 내용은 자바스크립트로 슬라이드쇼 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!