album
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url('http://stdl.qq.com/stdl/skin/upload/production/305bb8fd2d58069e4a85016132ec66c1.webp');
        }

        .tu1 {
            width: 250px;
            height: 250px;
            position: absolute;
            top: 0;
            left: 0;
            background-image: url(http://m.imeitou.com/uploads/allimg/2018111811/be22pkn1zpo.jpg);
            z-index: 10;
        }

        .tu2 {
            width: 550px;
            height: 350px;
            position: absolute;
            top: 100px;
            left: 100px;
            background-image: url(http://m.imeitou.com/uploads/allimg/2018111811/a2lxdhdm2oc.jpg);
            z-index: 10;
        }

        .tu3 {
            position: absolute;
            top: 300px;
            left: 300px;
            width: 450px;
            height: 200px;
            background-image: url(http://m.imeitou.com/uploads/allimg/2018111811/nnvaplm2vw1.jpg);
        }

        .tu4 {
            width: 550px;
            height: 250px;
            background-image: url(http://m.imeitou.com/uploads/allimg/2018111811/xpz5go532wr.jpg);
            position: absolute;
            top: 500px;
            left: 500px;
        }

        .borders {
            border: 5px solid #fff;
        }
    </style>

</head>

<body>
    <div class="tu1 borders"></div>
    <div class="tu2 borders"></div>
    <div class="tu3 borders"></div>
    <div class="tu4 borders"></div>
    <script>
        // 随意挪动图片
        var img1 = document.querySelector('.tu1');
        var img2 = document.querySelector('.tu2');
        var img3 = document.querySelector('.tu3');
        var img4 = document.querySelector('.tu4');
        //通过给背景图片设置鼠标事件实现
        img1.addEventListener('mousedown', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            document.addEventListener('mousemove', ha)
            img2.style.zIndex = '1';

            function ha(e) {
                img1.style.left = e.pageX - x + 'px';
                img1.style.top = e.pageY - y + 'px';
                img1.style.zIndex = '999';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', ha);
                img1.style.zIndex = '11';
            })
        })
        img2.addEventListener('mousedown', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            document.addEventListener('mousemove', haa)
            img2.style.zIndex = '1';

            function haa(e) {
                img2.style.left = e.pageX - x + 'px';
                img2.style.top = e.pageY - y + 'px';
                img2.style.zIndex = '999';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', haa);
                img2.style.zIndex = '11';
            })
        })
        img3.addEventListener('mousedown', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            document.addEventListener('mousemove', hahaa)
            img3.style.zIndex = '1';

            function hahaa(e) {
                img3.style.left = e.pageX - x + 'px';
                img3.style.top = e.pageY - y + 'px';
                img3.style.zIndex = '999';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', hahaa);
                img3.style.zIndex = '11';
            })
        })
        img4.addEventListener('mousedown', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            document.addEventListener('mousemove', haha)
            img4.style.zIndex = '1';

            function haha(e) {
                img4.style.left = e.pageX - x + 'px';
                img4.style.top = e.pageY - y + 'px';
                img4.style.zIndex = '999';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', haha);
                img4.style.zIndex = '11';
            })
        })
    </script>
</body>

</html>