カルーセル/3D アルバム特殊効果 (マウスのドラッグと回転) を実装するための純粋な JavaScript
#見てみましょう最初にエフェクトから 画像
実装のアイデアについて話しましょう
カルーセルは深さのあるボックスに依存していますフィールド (パースペクティブ) 属性 (ここではボックス ID はパースペクティブで始まります) により、Web ページの内部への拡張感が作成され、画像を含むボックス (ここではラップと名付けられています) を Z 軸に沿って移動できるようになります (被写界深度属性を持つボックス内のtranslateZ(Xpx))（パースペクティブのtransform属性によって生成される3D効果）は、ボックスのy軸に沿って回転（ラップ）することで実現されます。
【関連コースの推奨事項: JavaScript ビデオ チュートリアル】
#3D 実装プロセス
まず、js の変換における xyz 軸の意味を知る必要があります。
/* 场景景深 */
#perspective{
perspective: 700px;/*此属性是实现旋转木马的要点，能产生空间上的距离/延伸感。
在此盒子中放置图片的盒子便可以实现向网页内部延伸的感觉*/
}2. 次に、ピクチャ ボックスを含むコンテナ ラップを中央に表示するように設定し、position:relative 属性を画像の位置決めをします。後で使用するtransform属性を追加します。 #wrap{
position: relative;
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid black;
transform-style: preserve-3d; /*实现3d效果的关键步骤，与boxshadow配合使用可以忽略层级问题，之后会说到*/
transform: rotateX(0deg) rotateY(0deg) ;//为盒子的3d效果和旋转效果做准备。
}画像を追加し、スタイルを設定し、position:absolute; を使用してそれらをオーバーラップさせます。それを配列形式で取得し、配列の長さの長さに基づいて画像の回転角度を計算します。 #wrap img{
position: absolute;
width: 200px;
}
<script>
var oImg = document.getElementsByTagName('img')；
var Deg = 360/oImg.length;
oWrap = document.getElementById('wrap'); /*顺便拿一下容器*/
</script>配列をトラバースして、y 軸に沿って度単位で回転します。ここではプロトタイプが使用されており、配列内の各ピクチャが関数 (el、index) を実行するように、配列を走査するために foreach メソッドが使用されています。インデックス添字を使用して、配列内の各ピクチャが回転する必要があるさまざまな度を区別します (最初のピクチャは 0° (Deg * 0)、2 番目のピクチャは Deg 度 (Deg * 1)、3 番目のピクチャは (Deg * 2) 度です。 .)/*oImg表示数组对象，function(el,index)表示数组内每个对象要执行的函数，index为其下标。*/
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)";
})Array.prototype プロパティは Array コンストラクターのプロトタイプを表し、すべての Array オブジェクトに新しいプロパティとメソッドを追加できます。 forEach() メソッドは、配列の各要素に対して提供された関数を 1 回実行します。 ここで、xxx.xx.transform = "rotateY(" Deg*index "deg)";度単位を追加し、括弧で囲む必要があることに注意してください。二重引用符で囲む、つまり、出力後の結果は、transform:rotateY(degree deg); 度は数値を表すため、文字列に変換することは避けるべきです。 前の手順を完了した後、translateZ(350px) 属性を使用してボックス内の画像を Z 軸に沿って移動させ、最初に 3D 効果を確認しますが、この時点で階層的な問題があることがわかります。コンテナー内の画像配列 ( Zindex ) を使用すると、後ろに表示されるべき画像が生成されます。 この効果を無視して階層問題を回避する方法は次のとおりです: /*加上沿z扩散*/
<script>
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; //沿z轴扩散350px
})
</script>
-------执行完毕后--------加上属性观察效果---------
#wrap{
width: 200px;
height: 200px;
position: relative;
margin:150px auto;
transform-style: preserve-3d; /*实现3d效果的关键步骤，与boxshadow配合使用可以忽略层级问题*/
}
#wrap img{
position: absolute;
width: 200px;
box-shadow: 0px 0px 1px #000000; /* 用box-shadow配合transform-style: preserve-3d;可以忽略层级问题 */
}この時点で、画像を含むボックスにtransform:rotateX(-15deg);を追加すると、Aが表示されます。このとき、ボックスを y 軸を中心に回転させることで、カルーセル効果を実現できます。
モーション処理の実現
カルーセルはボックスを回転させるだけで実現でき、setintervalを使うことで連続的に回転させることができます。 マウスのドラッグを使用してカルーセルを実装したい場合は、ボックスを含むコンテナ (ラップ) がコンテナ (ラップ) 自体の y 軸を中心に回転できるようにコードを追加する必要があります。マウスの座標が変わります。var nowX ,nowY,//当前鼠标坐标
lastX ,lastY ,//上一次鼠标坐标
minusX,minusY ,//距离差
roX = -10,roY = 0;//总旋转度数
window.onmousedown = function(ev){
var ev = ev;//获得事件源
//鼠标移动后当前坐标会变为旧坐标，此处先保存，在算鼠标位移距离差的时候会用到。
lastX = ev.clientX;
lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev;//获得事件源
nowX = ev.clientX;nowY = ev.clientY;//获得移动时的当前坐标
minusX = nowX - lastX;//坐标差
minusY = nowY - lastY;//坐标差
//累计差值，如果不累计的话转轮在每次点击-->移动后都会从第一张开始。
roY += minusX;
roX -= minusY;//累计差值
//转动容器的x轴和y轴，使其转动度数(数值，不带单位)等于鼠标坐标差。
oWrap.style.transform = "rotateX("+roX+"deg)"
+"rotateY("+roY+"deg)";
lastX = nowX;lastY = nowY;//移动末期现坐标变为旧坐标
}
this.onmouseup = function(){
this.onmousemove = null;//取消鼠标移动的影响
// this.onmousedown = null;
}
}
}
完全なコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{overflow: hidden;
background: #000000;
}
/* 场景景深 */
#perspective{
perspective: 700px;
}
#wrap{
position: relative;
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid black;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(0deg) ;/*景深可以简写在此属性里*/
}
#wrap img{
position: absolute;
width: 200px;
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0px 0px 1px #000000;
/* 用box-shadow可以忽略层级问题 */
}
</style>
</head>
<body>
<div id="perspective">
<div id="wrap">
<img src="/static/imghwm/default1.png" data-src="img3/preview1.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview2.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview3.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview4.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview5.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview6.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview7.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview8.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview9.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview10.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img src="/static/imghwm/default1.png" data-src="img3/preview11.jpg" class="lazy" alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oImg = document.getElementsByTagName('img'),
oWrap = document.getElementById('wrap');
var Deg = 360/(oImg.length);
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)";
// el.style.zIndex = -index;
el.style.transition = "transform 1s "+ index*0.1 +"s";
});
var nowX ,nowY,//当前鼠标坐标
lastX ,lastY ,//上一次鼠标坐标
minusX,minusY ,//距离差
roX = -10,roY = 0;//总旋转度数
window.onmousedown = function(ev){
var ev = ev;//获得事件源
lastX = ev.clientX;lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev;//获得事件源
nowX = ev.clientX;nowY = ev.clientY;//获得当前坐标
minusX = nowX - lastX;minusY = nowY - lastY;//坐标差
roY += minusX;//累计差值
roX -= minusY;//累计差值
oWrap.style.transform = "rotateX("+roX+"deg)"
+"rotateY("+roY+"deg)";
lastX = nowX;lastY = nowY;//移动末期现坐标变为旧坐标
}
this.onmouseup = function(){
this.onmousemove = null;//取消鼠标移动的影响
// this.onmousedown = null;
}
}
}
</script>
</body>
</html>この記事は js チュートリアル 列からのものです。ぜひ学習してください。
以上が3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
