Perkongsian pemalam jQuery: Turn.js melaksanakan kesan perubahan halaman e-buku mudah alih

Bagaimana untuk mencapai kesan membalik buku yang hebat? Artikel berikut akan berkongsi dengan anda pemalam jQuery - Turn.js, dan memperkenalkan cara menggunakan Turn.js untuk melaksanakan projek mengubah halaman e-buku mudah alih saya harap ia akan membantu semua orang !

Mari kita lihat kesannya dahulu:

Mengenai Turn.js

Ia adalah ringan (15kb) Pemalam jQuery/html5 digunakan untuk mencipta kesan perubahan halaman yang serupa dengan buku dan majalah, dan menyokong peranti skrin sentuh. Turn.js menyokong pecutan perkakasan untuk menjadikan kesan pusingan halaman lebih lancar. [Pembelajaran yang disyorkan: Tutorial video jQuery, video bahagian hadapan web]

Ciri-ciri:

• Terpakai pada iPad dan iPhone.
• API yang ringkas, cantik dan berkuasa.
• Membenarkan pemuatan halaman dinamik melalui permintaan Ajax.
• Kandungan HTML5/CSS3 tulen.
• Dua kesan peralihan.
• Berfungsi dengan penyemak imbas lama seperti IE 8 dengan turn.html4.js

Penggunaan asas turn.js

1 Perkenalkan turn.js

Turn.js bergantung pada jQuery Pertama, teg skrip memperkenalkan jQuery, dan turn.js memerlukan versi 1.3 atau lebih tinggi.

turn.js boleh dimuat turun dari laman web rasmi

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/turn.js"></script>

2 Cipta html dan css

Buat bekas elemen dan Beberapa sub-elemen yang mewakili nombor halaman, tetapkan lebar dan ketinggian yang sesuai untuk mereka, masukkan sedikit kandungan

<div id="flipbook">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

3 Penggunaan Asas

$('#flipbook').turn({
    acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
    pages: 11, // 页码总数
    elevation: 50, // 转换期间页面的高度
    width: 300, // 宽度 单位 px
    height: 800, // 高度 单位 px
    gradients: true, // 是否显示翻页阴影效果
    display: 'single', //设置单页还是双页
    when: {
	// 翻页前触发
	turning: function (e, page, view) {
	                    
	},
	// 翻页后触发
	turned: function (e, page) {
				
        }
    }
});

Ini boleh dicapai Kesan perubahan halaman asas

3.1 pusingkan item konfigurasi biasa

3.2 apabila acara mendengar biasa

3.3 giliran Kaedah biasa

Pelaksanaan projek

Projek ini mempunyai 30p, dan setiap p sepadan dengan gambar Terlalu lambat untuk membina halaman demi halaman Gunakan js untuk mencipta

untuk. merangkum fungsi konfigurasi asas turn .js, nyatakan kesan pusingan halaman anda sendiri mengikut API

Sebaik sahaja anda masuk, panggil fungsi penciptaan, bina halaman, dan tentukan sama ada persekitaran penyemak imbas semasa menyokong ciri csstransforms ia disokong. 🎜>Sambungan

Dua pemalam js digunakan dalam projek Pengenalan ringkas

Modernizr.js

Pelayar tradisional tidak akan diganti sepenuhnya pada masa ini, menyukarkan anda untuk membenamkan ciri CSS3 atau HTML5 terkini ke dalam tapak web anda.

Modernizr

dilahirkan untuk menyelesaikan masalah ini Sebagai perpustakaan JavaScript sumber terbuka, Modernizr mengesan sokongan penyemak imbas untuk fungsi CSS3 atau HTML5.

yeponpe.js

yepnope.js

ialah skrip js yang boleh memuatkan fail sumber secara tidak segerak berdasarkan keadaan input pada halaman Hanya js/css yang diperlukan oleh pengguna dimuatkan. Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengajaran Pengaturcaraan

! !

Atas ialah kandungan terperinci Perkongsian pemalam jQuery: Turn.js melaksanakan kesan perubahan halaman e-buku mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!