Gunakan impress.js untuk membuat petua slideshows

Rumah

hujung hadapan web

tutorial js

Gunakan impress.js untuk membuat petua slideshows_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

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 "".

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 id="impress-js">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 Berkaitan

JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.