1

请帮忙。此代码在本地有效，但在我将其上传到远程服务器后无效。这似乎不是 cdn 问题，因为我将警报语句作为测试放入。第二个语句用于一个单独的页面，它在那里工作。我在我的html页面底部通过cdn引用jQuery，并在其下方链接到我的javascript文件。任何帮助将不胜感激。

$(document).ready(function () {
    $('.thmb').hover(function () {
        var x = $('.thmb').index(this);
        $('.info_art').eq(x).toggleClass("hover-animation");
    });
    $('.thmbs_pdg_div a').click(function (evt) {
        evt.preventDefault();
        var divname = this.name;
        $("#" + divname).show().siblings().hide();
    });
});

这是我在 html 页面末尾添加的代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-1.8.2.min.js">  <\/script>')</script>
<script type="text/javascript" src="javascript/artwork.js"></script>

这是页面的网址：http ://www.kipdeeds.com/artwork_page.html

关于不工作的页面的一些附加信息：有七个类别，每个类别的文本都是精灵（例如“纸上”、“新艺术”等）。当一个人悬停时，位置应该会移动，显示带有箭头图标的文本的新图像。我正在编写的程序将允许相应的图像图标在显示文本的精灵中产生相同的效果。

现在我不会修改代码，直到我得到反馈（想法比我的好）。

4

1 回答 1

1

你的JS很好。

问题是您的 CSS 和图像的差异。这是你的CSS：

a.art_paper {
    background: url("../assets/artwork_page/on_paper.gif") repeat scroll 0 0 transparent;
    display: block;
    height: 20px;
    margin-top: 33px;
    width: 95px;
}

a:hover, #artwork_main_div .hover-animation {
    background-position: 0 -100px;
}

她是你的图片：在此处输入图像描述（95px x 20px）

你无限重复你的背景图像，它恰好是 20px 高。当.hover-animation该类处于活动状态时，它会将背景向下滑动 100 像素，这将带您进行图像的第 5 次 (100/20=5) 垂直迭代......看起来与原始图像完全相同。

在此处输入图像描述

于 2013-02-10T17:14:36.220 回答