jQuery超酷3D包装盒封面旋转特效

jQuery超酷3D包装盒封面旋转特效

简要教程

3DCoverjQuery是一款效果非常炫酷的3D包装盒封面旋转jQuery特效插件。通过这个插件，你可以很轻易的将图片制作为DVD，XBOX，游戏和书本的封面，并且可以旋转封面来查看它的正面和反面。

使用方法

在页面中引入jQuery和bootstrap.min.css以及Cover3D.css和Cover3D.js文件。

<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"> </script>
     
<!-- Plugin -->
<link rel="stylesheet" href="Cover3D.css">
<script src="Cover3D.js"></script>

HTML结构

该封面特效的HTML结构使用一个

来包裹一张图片。

<div id="cover3">
  <img src="img/avengers-dvd-cover-1.jpg"/>
</div>

初始化插件

在页面DOM元素加载完毕之后，可以通过CoverTresD()方法来初始化该封面特效插件。

$('#cover3').CoverTresD();

配置参数

该封面特效只有一个可配置的参数color。它是封面的边框颜色。

{ color:"#FF0" /*Border Color */}

以上就是jQuery超酷3D包装盒封面旋转特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Label berkaitan：

jquery kotak pembungkusan Kesan putaran

sumber：php.cn

Artikel sebelumnya：HTML5 CANVAS：绘制图片 Artikel seterusnya：SVG基础|SVG TSPAN 元素

Kenyataan Laman Web ini

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 terbaru oleh pengarang

• Cara membaca Java Bytecode untuk keseronokan dan keuntungan
  2024-10-22 13:03:13
• Menyambung ke MySQL Menggunakan PHP
  2024-10-22 11:44:46
• Metrik DORA: Amalan terbaik untuk pemimpin kejuruteraan
  2024-10-18 17:59:07
• LLM: Memindahkan Pembelajaran dengan TensorFlow, Keras, Muka Berpeluk
  2024-10-18 17:52:44
• Kemahiran IT yang anda (dan pasukan teknologi anda) perlu kembangkan di tempat kerja
  2024-10-18 14:43:47
• Panduan Penuh untuk Menggunakan Fail Konfigurasi PHP untuk Amalan Terbaik
  2024-10-15 12:00:09
• Bagaimana untuk Mengimport Fail config.php dalam Skrip PHP?
  2024-10-15 11:53:15
• Cara Bermula dengan NodeJS – Buku Panduan untuk Pemula
  2024-10-17 14:29:56
• Nuxt.js: panduan praktikal
  2024-10-09 10:13:21
• Bagaimana untuk menetapkan sifat global konfigurasi Git yang penting
  2024-09-30 11:49:55

Isu terkini

Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...

daripada 2024-04-06 14:54:03

0

2

421

Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...

daripada 2024-04-05 09:26:49

0

1

1418

Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...

daripada 2024-04-04 18:40:04

0

1

3528

Saya telah mencipta elemen dalam CSS tulen melalui penanda halaman. Ia dicipta tetapi tidak kelihatan Kod saya adalah seperti berikut: g=document.createElement('div');g.setAttribute("id&q...

daripada 2024-04-04 17:27:27

0

1

417

Tidak dapat menghantar data borang pada iOS Safari/Firefox Ini berfungsi pada semua platform kecuali Safari/Firefox pada iOS: jQuery("#gform_1&q...

daripada 2024-04-04 12:53:48

0

1

303

Topik-topik yang berkaitan

Lagi>

• Apakah pemalam jquery?
• Bagaimana untuk mengendalikan json dengan jquery
• Bagaimana untuk memadam elemen dalam jquery
• Penggunaan kaedah jQuery hover().
• jquery melaksanakan kaedah paging
• Apakah elemen tersembunyi dalam jquery
• Apa yang ditonjolkan dalam jquery
• Perbezaan antara recv dan recvfrom