Question

我有一组按钮，目前只是具有不同悬停效果的图像，如下所示：

<img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" />

我想用它们做什么是点击它们时向下滚动到另一个div，但我不确定如何做到这一点。我在这里找到了一段代码示例http://jsfiddle.net/ryXFt/3/，但我的问题是我不知道如何将其应用到我创建的图像中。

这是我试图让它发挥作用的失败尝试：

<script type="text/javascript">

    <script>
    $("home.PNG").click(function() {
    $('html,body').animate({
    scrollTop: $(".centre .main .para2").offset().top},
    'slow');
 });
    </script>

然而它不起作用，我不确定如何让javascript将图像识别为点击的东西。

Answer 1

你的选择器错了

<script type="text/javascript">

    <script>
    $("#myID").click(function() {
    $('html,body').animate({
    scrollTop: $(".centre .main .para2").offset().top},
    'slow');
 });
    </script>

查看jquery documentation

Answer 2

您需要为图片添加id属性：

<img src='home.PNG' id='homeimg'.....>

然后像这样访问：

$("#homeimg").click(...

单击图像后，Javascript会垂直滚动

2 个答案: