Rumah > Artikel > hujung hadapan web > Buat tayangan slaid (gambar panorama 360 darjah) dengan kesan khas javascript_form

Buat tayangan slaid (gambar panorama 360 darjah) dengan kesan khas javascript_form

WBOYasal: 2016-05-16 15:48:391772semak imbas

Slaid sering digunakan apabila memberikan demonstrasi produk kepada pelanggan Kesan gambar panorama 360 darjah membawa nilai pengalaman yang baik kepada pengguna. Di sini saya ingin memperkenalkan kepada anda tutorial pelaksanaan tayangan slaid panorama 360 daripada Robert Pataki Tutorial ini menggunakan js untuk melaksanakan tayangan slaid panorama yang hebat Kandungan khusus adalah seperti berikut:

Tiada pemalam digunakan dalam tutorial ini Kami akan menggunakan HTML, css dan javascript untuk melaksanakannya, kami juga menggunakan rangka kerja jQuery.

Bagaimana untuk mencapainya?

Kami akan menggunakan imej 360 darjah pra-janaan untuk karusel untuk mencapai kesan paparan animasi. Mengandungi 180 imej. Jadi masa memuatkan mungkin lebih lama.

Pelaksanaan kod

Kami akan menambah pertanyaan media pada kod css supaya kesan ini boleh dicapai pada kedua-dua iPad dan iPhone.

1. Fail kod

Kami menambah direktori js, css dan imej. Direktori css mengandungi reset.css. js mengandungi jQuery. Fail kod adalah seperti berikut:

Buat tayangan slaid (gambar panorama 360 darjah) dengan kesan khas javascript_form

2. Projek baharu

Buat fail HTML index.html. Dalam

kami menetapkan port pandangan peranti mudah alih supaya kandungan tidak menyokong penskalaan. Tambahkan dua fail

reset.css dan threesixty.css. Mengandungi gaya css tersuai.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
</body>
</html>

3 Memuatkan bar kemajuan

Buat

Ia mengandungi

dan Kami akan menggunakan javascript untuk memuatkan imej secara dinamik.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
</body>
</html>

4. Tambahkan interaksi

Pada penghujung kod, kami menambah jQuery untuk mengendalikan interaksi dan threesixity.js untuk mengendalikan tayangan slaid imej.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
<scriptsrc="js/heartcode-canvasloader-min.js"></script>
<scriptsrc="js/jquery-1.7.min.js"></script>
<scriptsrc="js/threesixty.js"></script>
</body>
</html>

5. Gaya

Kami menambah fail threesixty.css. reset.css digunakan untuk menetapkan gaya lalai. Mula-mula tentukan pembungkus #tiga puluh puluh. Tayangan slaid gambar lalai ialah 960x450. Berpusat secara mendatar dan menegak.

#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p

Kandungan di atas adalah mengenai penggunaan javascript untuk membuat tayangan slaid.

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：Panduan Super untuk Pengaturcaraan dengan Browserify dengan jQuery_jqueryArtikel seterusnya：Panduan Super untuk Pengaturcaraan dengan Browserify dengan jQuery_jquery

Artikel berkaitan

Lihat lagi