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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

スライドは、顧客に製品のデモンストレーションを行うときによく使用され、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 を使用してスライドショーを作成する方法に関するものです。気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7369

Java チュートリアル

1628

CakePHP チュートリアル

1355

Laravel チュートリアル

1266

PHP チュートリアル

1215

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。開発者がいないべきではありません！タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース

ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム