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

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

WBOY

Lepaskan： 2016-05-16 15:48:39

asal

1782 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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