照片墙效果（交换位置还未实现）

最新推荐文章于 2021-03-14 10:44:35 发布

「已注销」

最新推荐文章于 2021-03-14 10:44:35 发布

阅读量511

点赞数

分类专栏： ======= Web ======= html + css + js

本文链接：https://blog.csdn.net/Songjs19931206/article/details/42151405

版权

======= Web ======= 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

html + css + js

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style>
    
*{margin: 0px;padding:0px;}
#ul1{width: 660px;position: relative;margin: 10px auto;}  /*相对定位，为绝对定位做准备？*/
#ul1 li{width: 160px; height:150px;float: left;list-style: none;margin: 10px;
        z-index: 1;}
.active{border: 1px solid red;}        
/*文档流是无法做拖拽的*/

</style>
<script>

    window.onload = function () {
        var ul = document.getElementById('ul1');
        var li = ul.getElementsByTagName('li');
        var i = 0;
        var pos = [];

        var min = 2;
        for (i = 0; i < li.length; i++) {
            pos[i] = { left: li[i].offsetLeft, top: li[i].offsetTop };
        }

        for (i = 0; i < li.length; i++) {
            li[i].style.left = pos[i].left + 'px';
            li[i].style.top = pos[i].top + 'px';
            li[i].style.position = 'absolute';
            li[i].style.margin = '0px';

            li[i].index=i;
        }
        //你需要‘动态’获取每一个图片的left与top值，为了换位而做准备；
        //-----------至此，布局转换部分完成了。

        //拖拽
        for (i = 0; i < li.length; i++) {
            setDrag(li[i]);
        }
        function setDrag(obj) {
            obj.onmousedown = function (ev) {
                obj.style.zIndex = min++;  //这里防止图片被覆盖。
                var oEvent = ev || event;
                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';

                    for (i = 0; i < li.length; i++) {
                        li[i].className = '';
                    }
                    var oNear = findNearest(obj);
                    if (oNear) {
                        oNear.className = 'active';
                    }
                    
                    /*
                    for (i = 0; i < li.length; i++) {
                        li[i].className = '';
                        if (obj == li[i]) continue;
                        else {
                            if (cdText(obj, li[i])) {
                            li[i].className = 'active';
                            }
                        }
                    }
                    */

                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;

                    /*var oNear = findNearest(obj);
                    if (oNear) {
                        //交换位置

                    }
                    else {
                        //自己回原位
                        startMove(obj, {
                            left: pos[obj.index].left,
                            top: pos[obj.index].top
                        };)
                    }*/
                }
                return false; //这里很重要！ 不然会总出现下载图片的情况。
            }
        }


        //碰撞检测：
        function cdText(obj1, obj2) {
            var l1 = obj1.offsetLeft;
            var r1 = obj1.offsetLeft + obj1.offsetWidth;
            var t1 = obj1.offsetTop;
            var b1 = obj1.offsetTop + obj1.offsetHeight;

            var l2 = obj2.offsetLeft;
            var r2 = obj2.offsetLeft + obj2.offsetWidth;
            var t2 = obj2.offsetTop;
            var b2 = obj2.offsetTop + obj2.offsetHeight;

            if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
                return false;
            }
            else {
                return true;
            }
        }

        function getDis(obj1, obj2) {
            var a = obj1.offsetLeft - obj2.offsetLeft;
            var b = obj1.offsetTop - obj2.offsetTop;
            return Math.sqrt(a * a + b * b);
        }

        function findNearest(obj) {
            //找到碰上的，且最近的；
            var min = 9999999;
            var min1 = -1;
            for (i = 0; i < li.length; i++) {
                if (obj == li[i]) continue;

                if (cdText(obj, li[i])) {
                    var dis = getDis(obj, li[i]);
                    if (dis < min) {
                        min = dis;
                        min1 = i;
                    }
                }
            }
            if (min1 == -1) {
                return null;
            }
            return li[min1];
        }

        //运动

    }

</script>
</head>
<body>
    <ul id="ul1">
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
        <li><img src="2.png"/></li>
        <li><img src="1.png"/></li>
    </ul>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
照片墙效果（交换位置还未实现）

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml"> *{margin: 0px;padding:0px;}#ul1{width: 660px;p
复制链接

扫一扫