ホームページ > 記事 > ウェブフロントエンド > 3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）

3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）

angryTom転載: 2019-11-30 14:18:113429ブラウズ

カルーセル/3D アルバム特殊効果 (マウスのドラッグと回転) を実装するための純粋な JavaScript

#見てみましょう最初にエフェクトから画像

3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）

実装のアイデアについて話しましょう

カルーセルは深さのあるボックスに依存していますフィールド (パースペクティブ) 属性 (ここではボックス ID はパースペクティブで始まります) により、Web ページの内部への拡張感が作成され、画像を含むボックス (ここではラップと名付けられています) を Z 軸に沿って移動できるようになります (被写界深度属性を持つボックス内のtranslateZ(Xpx))（パースペクティブのtransform属性によって生成される3D効果）は、ボックスのy軸に沿って回転（ラップ）することで実現されます。

【関連コースの推奨事項: JavaScript ビデオチュートリアル】

#3D 実装プロセス

まず、js の変換における xyz 軸の意味を知る必要があります。

3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）

まず div を設定し、そこにパースペクティブ属性を追加します。後で効果を観察しやすくするために (スペースを空けてください)

/* 场景景深 */
#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(&#39;img&#39;)；
var Deg = 360/oImg.length; 
oWrap = document.getElementById(&#39;wrap&#39;);  /*顺便拿一下容器*/
</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="img3/preview1.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview2.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview3.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview4.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview5.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview6.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview7.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview8.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview9.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview10.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
<img  src="img3/preview11.jpg"  alt="3Dフォトアルバムを実装するための純粋なjs（ソースコードが添付されています）" >
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oImg = document.getElementsByTagName(&#39;img&#39;),
oWrap = document.getElementById(&#39;wrap&#39;);
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 Array foreach 构造函数字符串 Length JS function 对象 prototype position transform

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：jsにおける等価判定 ===, == と Object.is() の違い次の記事：jsにおける等価判定 ===, == と Object.is() の違い

続きを見る