1

助けてください。このコードはローカルで機能しますが、リモートサーバーにアップロードした後は機能しません。テストとしてアラートステートメントを入力したため、cdnの問題ではないようです。2番目のステートメントは別のページ用であり、そこで機能します。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>

このページのURLは次のとおりです。http ：//www.kipdeeds.com/artwork_page.html

動作していないページに関する追加情報：7つのカテゴリがあり、各カテゴリのテキストはスプライトです（たとえば、「紙の上」、「新しいアート」など）。ホバーすると位置が移動し、矢印アイコンが付いたテキストの新しい画像が表示されます。私が書いていたプログラムでは、対応する画像アイコンが、テキストを表示するスプライトに同じ効果を与えることができます。

今のところ、フィードバックを得るまでコードを変更しません（私のアイデアよりも優れています）。

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 に答える