1

我正在尝试练习 jQuery 事件,我想在点击事件时点击一些图片,只是为了使用多种效果。

目前,我有一个图像在悬停时会增长,然后在鼠标悬停时缩小。
一切正常,直到我取消注释 jQuery 中的注释代码。图像就这样消失了。我已经尝试了几乎所有我能想到的东西,但我不确定我哪里出错了。
我对 jQuery 很陌生,我正在通过其他项目的教程和源代码自学,所以我不会怀疑这是否只是我的愚蠢行为。
如果有人可以帮助我解决我的问题,我将不胜感激。到目前为止,错误修复似乎是我编码中最薄弱的部分。

    $(document).ready(function() {
        var preloadImgs = ['imgs/ptilota.jpg',
                           'imgs/cell_division.jpg',
                           'imgs/lynx_spiders.jpg'];

        var imgs = [];
        for (var i=0; i<preloadImgs.length; i++) {
            imgs[i] = new Image();
            imgs[i].src = preloadImgs[i];
        }

        var photo = $('#photo');
        var imgVal = 0;

        photo.attr('src',preloadImgs[imgVal]);

        photo.hover(
            function() {
                $(this).stop().animate(
                    {
                        width: '1080px',
                        height: '682px'
                    }, 500
                );
            },

            function() {
                $(this).stop().animate(
                    {
                        width: '540px',
                        height: '341px'
                    }, 500
                );
            }
        );

        /* photo.click(

            function() {
                imgVal = imgVal + 1;

                 if (imgVal >= preloadImgs.length) {
                    imgVal = 0;
                } 

                photo.attr('src',preloadImgs[imgVal]);
            }
        ); */

    });

这是 HTML:

<body>

<img src="" id="photo" />

</body>
4

0 回答 0