javascript – 设置页眉和页脚reveal.js演示文稿

我想在演示文稿中设置页眉和页脚.我使用以下问题作为起点： https://github.com/hakimel/reveal.js/issues/806和 http://www.ciges.net/revealjs_demo/#/

我当前的实现提供了以下输出：

据我所知,reveal.js默认使用fixed size for the presentation,宽度为960px,高度为700px.这个尺寸对我来说完全没问题.但是,我希望不在此窗口中修复页眉和页脚.他们需要适应实际的屏幕尺寸.也就是说,我希望左标题与屏幕的左上角对齐.同样对于其他页眉和页脚,另请参见图像.我怎样才能做到这一点？目前看来我的页眉和页脚是固定在默认窗口(960×700).

我在reveal.js 3.2.0中使用以下代码(index.html)

@H_404_9@<!doctype html> <html lang="en"> <head> <Meta charset="utf-8"> <title>reveal.js – The HTML Presentation Framework</title> <Meta name="description" content="A framework for easily creating beautiful presentations using HTML"> <Meta name="author" content="Hakim El Hattab"> <Meta name="apple-mobile-web-app-capable" content="yes"> <Meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/simple.css" id="theme">  <link rel="stylesheet" href="lib/css/zenburn.css">  <script> var link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; document.getElementsByTagName( 'head' )[0].appendChild( link ); </script>  <style type="text/css"> .reveal div.header-left { position: absolute; top: 0; left: 0; padding: 0; margin: 0; } .reveal div.header-right { position: absolute; top: 0; right: 0; padding: 0; margin: 0; } .reveal div.footer-left { position: absolute; bottom: 0; left: 0; padding: 0; margin: 0; } .reveal div.footer-right { position: absolute; bottom: 0; right: 0; padding: 0; margin: 0; } </style> </head> <body> <div id="hidden" style="display:none;"> <div id="header"> <div class="header-left">test header left</div> <div class="header-right">test header right</div> <div class="footer-left">test footer left</div> <div class="footer-right">test footer right</div> </div> </div> <div class="reveal">  <div class="slides"> <section> <h1>Reveal.js</h1> <h3>The HTML Presentation Framework</h3> <p> <small>Created by $x^2$<a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small> </p> </section> <section> <h2>Hello There</h2> <p> reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. </p> </section>  <section> <section> <h2>Vertical Slides</h2> <p>Slides can be nested inside of each other.</p> <p>Use the <em>Space</em> key to navigate through all slides.</p> <br> <a href="#" class="navigate-down"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section> <h2>Basement Level 1</h2> <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p> </section> <section> <h2>Basement Level 2</h2> <p>That's it,time to go back up.</p> <br> <a href="#/2"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"> </a> </section> </section> </div> </div> <script src="lib/js/head.min.js"></script> <script src="js/reveal.js"></script> <script> // Full list of configuration options available at: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: false,progress: true,slideNumber: true,history: true,center: false,transition: 'slide',// none/fade/slide/convex/concave/zoom math: { mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html },// Optional reveal.js plugins dependencies: [ { src: 'lib/js/classList.js',condition: function() { return !document.body.classList; } },{ src: 'plugin/markdown/marked.js',condition: function() { return !!document.querySelector( '[data-markdown]' ); } },{ src: 'plugin/markdown/markdown.js',{ src: 'plugin/highlight/highlight.js',async: true,callback: function() { hljs.initHighlightingOnLoad(); } },{ src: 'plugin/zoom-js/zoom.js',async: true },{ src: 'plugin/notes/notes.js',{ src: 'plugin/math/math.js',async: true } ] }); </script> <script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript"> var header = $('#header').html(); if ( window.location.search.match( /print-pdf/gi ) ) { $('.slides > section').prepend(header); } else { $('.slides').prepend(header); } </script> </body> </html>

解决方法

这是 a slightly more complicated answer,也适用于pdf-export打印版本：

将元素添加到幻灯片背景< div> (而不是部分,幻灯片或揭示).这个< div>是动态生成的,所以我们必须等待Reveal.js ready事件.打印时会有轻微的延迟,接着是页眉和页脚移动到位的不必要的动画,但所有页眉/页脚都会根据需要在PDF中呈现.

伪代码：

>样式页眉/页脚< div>所以他们按照需要定位.
>创建隐藏的页眉/页脚< div>
>在Reveal.js就绪事件中,复制页眉/页脚< div>进入每个.slide-background< div>

代码：这可以复制粘贴到reveal.js文件的末尾(在结束< / body>标记之前)：

@H_404_9@<style type="text/css"> /* 1. Style header/footer <div> so they are positioned as desired. */ #header-left { position: absolute; top: 0%; left: 0%; } #header-right { position: absolute; top: 0%; right: 0%; } #footer-left { position: absolute; bottom: 0%; left: 0%; } </style>  <div id="hidden" style="display:none;"> <div id="header"> <div id="header-left">HEADER-LEFT</div> <div id="header-right">HEADER-RIGHT</div> <div id="footer-left">FOOTER-LEFT</div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript"> // 3. On Reveal.js ready event,copy header/footer <div> into each `.slide-background` <div> var header = $('#header').html(); if ( window.location.search.match( /print-pdf/gi ) ) { Reveal.addEventListener( 'ready',function( event ) { $('.slide-background').append(header); }); } else { $('div.reveal').append(header); } </script>

原文链接：https://www.f2er.com/js/151033.html

javascript – 设置页眉和页脚reveal.js演示文稿

解决方法

猜你在找的JavaScript相关文章