ドラッグフォトウォールを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおりです。

実装コードは次のとおりです。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>写真の壁をドラッグして写真を入れ替えるネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        #ul1 {
            幅: 660ピクセル;
            位置: 相対的;
            マージン: 10px 自動;
        }
 
        #ul1 li {
            幅: 200ピクセル;
            高さ: 150px;
            フロート: 左;
            リストスタイル: なし;
            マージン: 10px;
            zインデックス: 1;
        }
 
        #ul1 .アクティブ{
            境界線: 1px 破線の赤;
        }
    </スタイル>
    <script src="js/move.js"></script>
    <スクリプト>
        window.onload = 関数（）{
 
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var aPos = [];
            var iMinZindex = 2;
            var i = 0;
 
            //レイアウト変換 //現在のレイアウト画像の位置を取得します for (i = 0; i < aLi.length; i++) {
 
                aPos[i] = { 左: aLi[i].offsetLeft、上: aLi[i].offsetTop };
            }
            //レイアウト変換には2つのforループが必要です for (i = 0; i < aLi.length; i++) {
                //各画像の位置に値を割り当てます aLi[i].style.left = aPos[i].left + 'px';
                aLi[i].style.top = aPos[i].top + 'px';
 
                //変換位置 aLi[i].style.position = 'absolute';
                // offset の値にはすでに margin の値が含まれているため、キャンセルする必要があります。aLi[i].style.margin = '0';
 
                aLi[i].インデックス = i;
            }
 
            //ループドラッグ for (i = 0; i < aLi.length; i++) {
                setDrag(aLi[i]);
            }
            関数setDrag(obj) {
                //マウスが押されたとき obj.onmousedown = function (ev) {
                    //イベント互換 var oEvent = ev || event;
 
                    //現在の画像の積み重ね順序を増やす obj.style.zIndex = iMinZindex++;
                    //ドラッグされたオブジェクトの左上隅を基準としたマウスの位置を計算します。var disX = oEvent.clientX - obj.offsetLeft;
                    var disY = oEvent.clientY - obj.offsetTop;
 
                    //マウスが動いたとき document.onmousemove = function (ev) {
                        //イベント互換 var oEvent = ev || event;
 
                        //画像の位置を再割り当てします。obj.style.left = oEvent.clientX - disX + 'px';
                        obj.style.top = oEvent.clientY - disY + 'px';
 
                        // すべてのliスタイルをクリアします for (i = 0; i < aLi.length; i++) {
                            aLi[i].className = '';
                        }
 
                        //現在のドラッグ オブジェクトに最も近いターゲット オブジェクトを取得します。var oNear = findNearest(obj);
                        //存在する場合 if (oNear) {
                            //オブジェクトのクラスをアクティブに割り当てる
                            oNear.className = 'アクティブ';
 
                        }
 
                    };
 
                    //マウスが離されたとき document.onmouseup = function () {
 
                        ドキュメント.onmousemove = null;
                        ドキュメント.onmouseup = null;
 
                        //現在のドラッグ オブジェクトに最も近いターゲット オブジェクトを取得します。var oNear = findNearest(obj);
 
                        //最も近い衝突オブジェクトがある場合 if (oNear) {
 
                            oNear.className = '';
 
                            // 最も近いターゲット オブジェクトの zIndex を追加して、後ろからの移動を防ぎます。oNear.style.zIndex = iMinZindex++;
 
                            //現在のドラッグ オブジェクトがターゲット オブジェクト上に移動すると、ターゲット オブジェクトの上に配置されます。obj.style.zIndex = iMinZindex++;
 
                            //最も近いターゲット オブジェクト (oNear) を現在のオブジェクト (obj) の位置に移動します startMove(oNear, aPos[obj.index]);
 
                            //現在のオブジェクト (obj) を最も近いターゲット オブジェクト (oNear) の位置に移動します。startMove(obj, aPos[oNear.index]);
 
 
                            //現在のドラッグ オブジェクトとターゲット オブジェクトのインデックス値を交換します。var tmp = 0;
 
                            tmp = obj.index;
                            obj.index = oNear.index;
                            oNear.index = tmp;
 
                            //最も近い衝突オブジェクトがない場合} else {
                            //元の位置に戻る startMove(obj, aPos[obj.index]);
                        }
                    };
 
                    // タイマーをクリアします // シフト処理中にイメージが再度ドラッグされたときにジッターが発生するのを防ぐため clearInterval(obj.timer);
 
                    //ブラウザのバグ、ドラッグ時のマウスポインタの変形を防ぐには、false を返します。
                };
            }
 
            //衝突検出関数 cdTest(obj1, obj2) {
 
                //ターゲット 1 の左、右、上、下の輪郭の位置 var l1 = obj1.offsetLeft;
                var r1 = obj1.offsetLeft + obj1.offsetWidth;
                var t1 = obj1.offsetTop;
                var b1 = obj1.offsetTop + obj1.offsetHeight;
 
                //ターゲット 2 の左、右、上、下の輪郭の位置 var l2 = obj2.offsetLeft;
                var r2 = obj2.offsetLeft + obj2.offsetWidth;
                var t2 = obj2.offsetTop;
                var b2 = obj2.offsetTop + obj2.offsetHeight;
 
                // 2つのターゲットの外側の輪郭を比較して、衝突するかどうかを検出します。if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
 
                    false を返します。
 
                } それ以外 {
 
                    true を返します。
                }
            }
 
            //ドラッグされたオブジェクトと他のオブジェクト間の距離を計算する function getDis(obj1, obj2) {
 
                var a = obj1.offsetLeft - obj2.offsetLeft;
                var b = obj1.offsetTop - obj2.offsetTop;
 
                Math.sqrt(a * a + b * b) を返します。
            }
 
            //最も近いものを見つける関数 findNearest(obj) {
 
                //最小値を見つけるための参照値 var iMin = 999999999;
 
                var iMinIndex = -1;
 
                (i = 0; i < aLi.length; i++) の場合 {
 
                    // 自分自身との衝突を避け、検出をスキップします if (obj == aLi[i]) {
                        続く
                    };
 
                    //衝突オブジェクトが見つかった場合 if (cdTest(obj, aLi[i])) {
                        //ドラッグされたオブジェクトと各li間の距離を計算します。var dis = getDis(obj, aLi[i]);
                        //現在の参照距離が特定のliと現在のドラッグオブジェクト間の距離よりも大きい場合if (iMin > dis) {
                            // 参照距離を再割り当てします (複数回比較して最小値を取得します)
                            iMin = 無効;
                            //最も近いターゲットのインデックスを取得します。iMinIndex = i;
                        }
                    }
                }
 
                //iMinIndex は -1 です。これは、iMinIndex に遭遇したことがないことを意味します。if (iMinIndex == -1) {
 
                    null を返します。
 
                    //それ以外の場合} else {
 
                    //最も接近して衝突したliを返す
                    aLi[iMinIndex]を返します。
                }
            }
        };
    </スクリプト>
</head>
 
<本文>
    <ul id="ul1">
        <li><img src="images/0.jpg" /></li>
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/0.jpg" /></li>
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
    </ul>
</本文>
 
</html>

以下は、上記のコードで紹介した move.js ファイルです。主にモーション効果を実現するために使用されます。コードは次のとおりです。

関数 getStyle(obj, attr) {
    （obj.currentStyle）の場合{
        obj.currentStyle[attr]を返します。
    } それ以外 {
        getComputedStyle(obj, false)[attr]を返します。
    }
}
 
関数 startMove(obj, json, fn) {
    タイマー間隔をクリアします。
    obj.timer = setInterval(関数() {
        var bStop = true;
        for (var attr in json) {
 
            var iCur = 0;
 
            属性 == '不透明度' の場合 {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } それ以外 {
                iCur = parseInt(getStyle(obj, attr));
            }
 
 
            var iSpeed = (json[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
 
            iCur != json[attr] の場合 {
                bStop = false;
            }
 
            属性 == '不透明度' の場合 {
                obj.style.filter = 'alpha(不透明度:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } それ以外 {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
 
        if (bStop) {
 
            タイマー間隔をクリアします。
 
            もし（関数）{
                関数fn();
            }
        }
    }, 30)
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: