前端开发学习Day27第27天，我只做了一个案例。布局部分花了一整个上午，很乱。代码还是写的少，没有思路。下午好不容易做

第27天，我只做了一个案例。布局部分花了一整个上午，很乱。代码还是写的少，没有思路。下午好不容易做好了布局，写脚本的时候又被卡死，我现在严重怀疑自己的大脑是怎么长的……本着不抛弃不放弃的原则，晚上找人教，讲了一晚上，好歹弄明白了一些。现在长长的叹了一口气，我有点沮丧了。以下是今天案例的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标移动改变图片路径</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 420px;
            height: 535px;
            border: solid 1px black;
            margin: 0 auto;
        }

        .top {
            height: 315px;
        }

        .center {
            height: 110px;
        }

        .bottom {
            height: 110px;
        }

        .first img {
            width: 300px;
            height: 303px;
            border-radius: 5px;
            float: left;
            position: relative;
            margin: 6px 5px;
        }

        img {
            border-radius: 5px;
            height: 100px;
            width: 100px;
            margin: 2px 2px 0 0;
        }

        .center img {
            float: left;
            margin: 5px 2px;

        }

        .bottom img {
            float: left;
            margin: 2px;
        }

        .item img{

        }
    </style>
    <script>
        window.onload = function () {
            var previewImg = document.getElementById('preview')
            var oImg = document.querySelectorAll('.item img');
            for (var i = 0; i < oImg.length; i++) {
                oImg[i].onmouseover = function () {
                    previewImg.src = this.src
                }
            }
        }
    </script>
</head>

<body>
    <div id="box">
        <div class="top">
            <div class="first">
                <a href="">
                    <img id="preview" src="image/1.jpg" alt="">
                </a>
            </div>
            <div class="item"><a href=""><img src="image/1.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/2.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/3.jpg" alt=""></a></div>
        </div>
        <div class="center">
            <div class="item"><a href=""><img src="image/4.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/5.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/6.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/7.jpg" alt=""></a></div>
        </div>
        <div class="bottom">
            <div class="item"><a href=""><img src="image/8.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/9.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/10.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="image/11.jpg" alt=""></a></div>
        </div>
    </div>
</body>

</html>

预览效果点击以下链接：鼠标移过改变图片路径。