JS 在鼠标悬停时更改背景图像（页面而不是元素）

Question

我想了解当您将鼠标悬停在链接上时如何为整个页面加载不同的背景图像。全尺寸背景图像使用名为 Fullscreenr 的 js 脚本。

该页面的背景图像有一个 id

有什么想法吗？我什至不知道如何在这里搜索正确的术语。

http://www.rollinleonard.com/projects/

Answer 1

由于您已在页面上加载了 jQuery，但问题中未提及它，因此我将提供 jQuery 和非 jQuery 解决方案。

jQuery：

<script type="text/javascript">
    $(function() {
        var bgimg = $('#bgimg');

        var images = [
            '/src/of/img1.jpg',
            '/src/of/img2.jpg',
            '/src/of/img3.jpg',
            '/src/of/img4.jpg',
            '/src/of/img5.jpg',
            '/src/of/img6.jpg',
            '/src/of/img7.jpg',
            '/src/of/img8.jpg',
            '/src/of/img9.jpg',
            '/src/of/img10.jpg'
        ];

        $('p.overlayimage > a').each(function( i ) {
            $(this).mouseenter(function() {
                bgimg.attr( 'src', images[ i ] );
            });
        });
    });
</script>

---

如果您不打算使用 jQuery，则将：更改

<p class="overlayimage">

为：

<p id="overlayimage">

并执行以下操作：

<script type="text/javascript">
    var bgimg = document.getElementById('bgimg');

    var images = [
        '/src/of/img1.jpg',
        '/src/of/img2.jpg',
        '/src/of/img3.jpg',
        '/src/of/img4.jpg',
        '/src/of/img5.jpg',
        '/src/of/img6.jpg',
        '/src/of/img7.jpg',
        '/src/of/img8.jpg',
        '/src/of/img9.jpg',
        '/src/of/img10.jpg'
    ];

    var aElems = document.getElementById('overlayimage').getElementsByTagName('a'),
        len = aElems.length;

    function generateHandler( i ) {
        return function() {
            bgimg.src = images[ i ];
        };
    }

    while( len-- ) {
        aElems[ len ].onmouseover = generateHandler( i );
    }
</script>

...将其放在页面底部，就在结束 之前标签。