cari

Rumah >hujung hadapan web >tutorial js >Gunakan impress.js untuk membuat petua slideshows_javascript

Gunakan impress.js untuk membuat petua slideshows_javascript

WBOY
WBOYasal
2016-05-16 15:40:051538semak imbas

Minggu lepas saya melihat seorang rakan membuat tayangan slaid zum yang sangat menarik Mungkin kerana saya tidak tahu banyak tentangnya, saya mengambil masa yang lama untuk mencari beberapa alat tayangan slaid web. Selepas menapis, saya memutuskan untuk menggunakan impress.js Geek.

impress.js ialah alat tayangan slaid yang baru muncul Kesannya serupa dengan Prezi, tetapi ia mempunyai fungsi 3D di bawah lesen MIT&GPL. Ia benar-benar berita baik untuk orang yang mempunyai asas tertentu dalam pembangunan web. Hanya gunakan beberapa arahan html dan muatkan impress.js untuk mencipta tayangan slaid zum yang cantik.

Apabila membuatnya, mula-mula anda perlu menulis beberapa kepala, yang sama seperti Web biasa, tetapi badannya berbeza. Memandangkan impress.js pada masa ini hanya menyokong penyemak imbas moden seperti Chrome, Firefox dan Safari (sentuh IE...), mesej sandaran diperlukan. 

<body class="impress-not-supported">
<div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

Kemudian mula menulis badan sebenar, bahagian impress. Bahagian ini mesti disertakan sepenuhnya dalam "218e2c5176834e3ca650e146c2e2f1c7".

Slaid pertama ialah slaid langkah, yang hampir sama dengan slaid biasa, hanya halaman demi halaman. Anda boleh menambahnya menggunakan kaedah berikut 

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一页的幻灯片</q>
</div>

Apa yang anda perlu tulis ialah id, data-x dan data-y. id ialah nama, dan data-x dan data-y ialah koordinat. Malah, impress.js memberi anda pemandangan yang besar, dan apa yang anda perlukan ialah membuang slaid ke dalam dan meletakkannya di tempat yang betul. Ia kemudiannya akan dipaparkan dalam susunan yang anda lemparkan. Malah, terdapat satu lagi koordinat, iaitu data-z Koordinat ini boleh membawa anda ke dalam kesan 3D dan zum.

Satu lagi jenis slaid dipanggil langkah Tidak seperti yang sebelumnya yang mempunyai bingkai tegar, slaid jenis ini mengalih keluar sepenuhnya bingkai yang menyekat anda dan menulis terus pada latar belakang. Sila lihat contoh berikut: 

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻灯片由</span>
  <h1>impress.js</h1>
  <span>给你呈现</span>
</div>

Istimewanya di sini ialah terdapat skala data, menunjukkan saiz slaid ini Anda boleh membuat halaman yang sangat besar atau sangat kecil untuk memberikan kontras skala. Terdapat juga fungsi putaran: 

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>这是一个 <strong>presentation tool</strong> <br/>
  作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/>
  利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

Putaran data di atas mewakili sudut putaran.

Akhir sekali, anda boleh memberikan pembayang untuk memberitahu pengguna bahawa mereka perlu menggunakan kekunci anak panah papan kekunci untuk mengawal keseluruhan proses main balik. Jika pengguna hanya mengklik pada slaid dan tiada jawapan, gesaan ini akan muncul secara automatik. 

<div class="hint">
  <p>请用方向键控制</p>
</div>

Di penghujung halaman, anda perlu memuatkan impress.js saya terus memetik halaman pengarang di sini, tetapi jika ia adalah paparan luar talian, disyorkan untuk memuat turun dan menggunakannya. Hanya memuatkan js tidak mencukupi, anda juga perlu menggunakan impress().init() untuk memulakannya. 

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

Sebenarnya alat ini mempunyai banyak fungsi, saya baru belajar beberapa fungsi yang paling asas. Cadangan di laman web rasmi adalah untuk melihat secara langsung index.html yang disediakan olehnya. Terdapat ulasan terperinci di dalamnya untuk memberitahu anda apa fungsi yang saya buat dan mengubahsuainya dari index.html yang disediakan oleh penulis. Walaupun perkara ini sangat mudah, ia cukup bagus untuk membuat slaid untuk ucapan. Halaman yang saya buat diletakkan pada Gist, dan kod keseluruhan boleh didapati di penghujung halaman ini.

Sudah tentu, alat yang serupa tidak boleh tidak menyebut Prezi, yang merupakan pelaksanaan awal idea ini, tetapi dikatakan ia tidak menyokong bahasa Cina. Tencent AlloyTeam Domestik juga telah membangunkan alat yang dipanggil iPresst, yang boleh dikatakan sebagai alat yang baik untuk orang bodoh, tetapi kerana ia adalah rangkaian sosial, ia agak peribadi. Kelemahan terbesar impress.js ialah ia terlalu culun Jika ada alat pembangunan WYSIWYG, ia pasti akan dipopularkan. 




 
 
 
 impress.js 尝试
  
 




 
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

 
For the best experience please use the latest Chrome, Safari or Firefox browser.






 

  第一页的幻灯片：
是否尝试过这样幻灯？
  这种幻灯片最初由Prezi带给世界
 

 

  这种幻灯片通过ZUI的方式，彻底摆脱了传统幻灯片的“盒子限制”
  唯一限制你的是你的创意！
 

 

  后面还有更多惊喜！
 

 

  你看到的幻灯片由
  
impress.js

  给你呈现
 

 

  
这是一个 presentation tool 

  作者从 prezi.com 得到灵感

  利用现代浏览器CSS3 transforms and transitions的力量

 

 

  
将你的想法视觉化

 

 

  
请看impress.js
  

  开放的幻灯工具

 

 

 






 
请用方向键控制




<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

Kandungan di atas ialah perkara yang saya kongsikan dengan anda tentang menggunakan impress.js untuk membuat tayangan slaid. Saya harap ia akan membantu semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery melaksanakan kod menu lungsur berbilang peringkat dengan effect_jquery animasiArtikel seterusnya：jQuery melaksanakan kod menu lungsur berbilang peringkat dengan effect_jquery animasi

Artikel berkaitan

Lihat lagi