0

我正在尝试创建一个简单的效果作为练习，基本上我希望图像在我将鼠标悬停在它上面时发生变化，并在我关闭鼠标时恢复

     <!DOCTYPE html>
     <html>
        <head>
            <title>Change pics on event</title>
            <meta charset = "utf-8">
            <script src = "jsf/jquery-1.8.js"></script>
            <link rel = "stylesheet" href = "talkpics.css">

        </head>
        <body>
            <div id = "pic">
                <img id = "sk" src = "tpi/skutch.jpg">
                <div id = "speech">
                   <img src = "tpi/speech5.png">
                </div>
            </div>
            <script>
                $(document).ready(function (){
                        $("#sk").hover(function(){
                        $(this).attr("src","tpi/skutch2.jpg");
                            }, function(){
            $(this).attr("src", "tpi/skutch.jpg");          
                              }
                });
            });
            var sb = new Array();
                sb[0] = 'tpi/speech1.png';
                sb[1] = 'tpi/speech2.png';
                sb[2] = 'tpi/speech3.png';
                sb[3] = 'tpi/speech4.png';
                sb[4] = 'tpi/speech5.png';



            </script>
        </body>
    </html>

该数组是我稍后要添加的其他内容的一部分，这是一个随机 png 语音气泡..基本上我希望图像在您滚动时随随机语音气泡而变化。但现在我的问题是让 skutch 图像发生变化。我已经按照网络上的教程进行了编码，并按照给出的示例进行了编码，但它无法正常工作，图像仍保留在 skutch.jpg 上。我不确定为什么任何帮助都会很棒。

*{
padding:0px;
margin:0px;
border:none;
}

#pic{
height:500px;
width:500px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
}

#sk{
position:relative;
}
#speech{
position:relative;
top:-450px;
left:-20px;
}
4

2 回答 2

0

不确定，如果这是问题，但你在这里有一个额外的括号：

$(document).ready(function () {
    $("#sk").hover(function () {
        $(this).attr("src", "tpi/skutch2.jpg");
    }, function () {
        $(this).attr("src", "tpi/skutch.jpg");
    //}  <== Not needed, comment it out...
    });
});
于 2013-05-05T07:51:45.890 回答
0

如果你用更好的缩进来格式化你的代码，你会看到你有一个}不应该存在的额外内容，这是一个语法错误，它会停止工作：

            $(document).ready(function () {
                $("#sk").hover(function () {
                    $(this).attr("src", "tpi/skutch2.jpg");
                }, function () {
                    $(this).attr("src", "tpi/skutch.jpg");
                }   // <-- remove this one
                });
            });

另请注意，初始化数组的更好方法如下：

var sb = ['tpi/speech1.png',
          'tpi/speech2.png',
          'tpi/speech3.png',
          'tpi/speech4.png',
          'tpi/speech5.png'];

你这样做的方式是有效的，但是为什么sb[0] =在你不需要的时候输入所有的部分呢？

于 2013-05-05T07:52:01.783 回答