javascript_form 特殊効果を使用してスライドショー (360 度のパノラマ画像) を作成する-jsチュートリアル-php.cn

javascript_form 特殊効果を使用してスライドショー (360 度のパノラマ画像) を作成する

WBOY

リリース： 2016-05-16 15:48:39

オリジナル

1800 人が閲覧しました

スライドは、顧客に製品のデモンストレーションを行うときによく使用され、360 度のパノラマ画像効果がユーザーに優れた体験価値をもたらします。ここでは、Robert Pataki による 360 パノラマスライドショーの実装チュートリアルを紹介します。このチュートリアルでは、js を使用してクールなパノラマスライドショーを実装します。

このチュートリアルではプラグインは使用しません。もちろん、HTML、CSS、JavaScript を使用して実装します。

それを達成するにはどうすればよいですか?

アニメーション表示効果を実現するために、カルーセルに事前に生成された 360 度画像を使用します。 180枚の画像が含まれています。そのため、ロード時間が長くなる可能性があります。

コードの実装

この効果を iPad と iPhone の両方で実現できるように、CSS コードにメディアクエリを追加します。

1. コードファイル

js、css、および画像ディレクトリを追加します。 css ディレクトリには、reset.css が含まれています。 jsにはjQueryが含まれています。コードファイルは次のとおりです:

javascript_form 特殊効果を使用してスライドショー (360 度のパノラマ画像) を作成する

2. 新しいプロジェクト

HTML ファイルindex.html を作成します。

では、コンテンツがスケーリングをサポートしないようにモバイルデバイスのビューポートを設定します。 2 つのファイルを追加

reset.css とthreesixty.css。カスタム CSS スタイルが含まれています。

<!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. 読み込み進行状況バー

スライドショーを保持するための

を作成します。画像シーケンスを含む

が含まれています。 JavaScriptを使用して画像を動的に読み込みます。

<!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. インタラクションを追加します

コードの最後に、インタラクションを処理する jQuery と画像スライドショーを処理する threesixity.js を追加します。

<!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. スタイル

threesixty.css ファイルを追加します。デフォルトのスタイルを設定するには、reset.css を使用します。まず #threesixty ラッパーを定義します。デフォルトの画像スライドショーは 960x450 です。水平方向と垂直方向の中央揃え。

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

ログイン後にコピー

上記の内容は、JavaScript を使用してスライドショーを作成する方法に関するものです。気に入っていただければ幸いです。