0

サムネイル付きの定義リストがあります。それらは「親指」クラスの 50% の不透明度です。ホバーすると 100% の不透明度。クリックすると 100% の不透明度に加えて、'thumb' が 'thumbactive' クラスに変更されます

これまでのところ、私のくだらないコードは機能しますが、唯一のことは、クリック時に 100% の tn を取得できないことです。

dl {
    幅: 700px;
}
dt {
    クリア: 左;
    フロート: 右;
    幅: 400px;
    高さ:80px;
    マージン: 0 0 10px 0;
    背景:オレンジ;
}
dd.thumb、dd.thumbActive {
    クリア: なし;
    フロート: 左;
    マージン: 0 0 10px 0;
    背景:黒;
}
dd {
    クリア: 右;
}

    jQuery.noConflict();

    jQuery(ドキュメント).レディ(関数() {

        /* デバッグ用 */
        関数 showClassNames() {
                jQuery("dt").each(関数() {
                    var className = jQuery(this).next().attr('class');
                    jQuery(これ).text(クラス名);
                });
        };
        showClassNames();

        /* すべてのサムをリセットします (50% アルファ、.thumb クラス名) */
        関数 resetThumbs() {
                jQuery("dd").each(関数() {
                jQuery(this).removeClass("thumbActive");
                jQuery(this).addClass("親指");
                jQuery("dd img").css('不透明度', 0.5);
            });
        };

        // 最初のサムを除くすべてのサムの半透明 (アクティブ)
        jQuery("dd:not(.thumbActive) img").css('不透明度', 0.5);
        jQuery("dd img").hover(
            function() { jQuery(this).css('不透明度', 1.0); }、
            function() { jQuery(this).css('不透明度', 0.5); }
        );

        jQuery("a.thumbClick").クリック(関数() {
            resetThumbs();
            jQuery(this).parent().removeClass("親指");
            jQuery(this).parent().addClass("thumbActive");
            jQuery(これ).css('不透明度', 1.0);
            showClassNames();           
            false を返します。
        });

    }); // ドキュメントの準備完了

<div id="album-canvas-left" style="width:930px; " >         
<dl id="thumb-list" >
    <dt></dt>
    <dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
    <dd></dd>
</dl>

4

3 に答える 3

2

不透明度の設定を CSS に移動し、jQuery でクラスを追加/削除するだけです。実際、IE6 を対象としていない場合は:hover、CSS で使用して不透明度を処理できます。

IE6 サポートあり

dd img{ 
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}

dd.hover img, dd.thumbActive img { 
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);
}

次に、これを次のように変更hoverします。

jQuery("dd").hover(
    function() { jQuery(this).addClass('hover'); },
    function() { jQuery(this).removeClass('hover'); }
);

IE6 サポートなし

dd img{ 
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}

dd:hover img, dd.thumbActive img{ 
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);
}

hoverそして、通話を完全に削除してください。

于 2009-12-26T18:06:02.340 に答える
1

クリックしてからマウスを離すと、ホバーアウト機能がまだ呼び出されており、不透明度が .5 に設定されています。

hover out 関数 (hover 関数の 2 番目の引数) で、オブジェクトのクラスが thumbActive に設定されていないことを確認してください。

于 2009-12-26T17:22:10.417 に答える
0

両方のおかげで、私はこれを思いつきました：

dd 画像 {
    不透明度: 0.5;
    -moz-不透明度: 0.5;
    フィルター: アルファ (不透明度 = 50);
}
/* IE6 は :hover をサポートしていません */
dd.hover img {
    不透明度: 1.0;
    -moz-不透明度: 1.0;
    フィルター: アルファ (不透明度 = 100);
}

jQuery("dd").hover(
    関数（） {
        jQuery(this).addClass('hover');
        showClassNames();
    }、
    関数（） {
        if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover');
    }
);

jQuery("a.thumbClick").クリック(関数() {
    jQuery("dd").removeClass("ホバー アクティブ");
    jQuery(this).parent().addClass("ホバー アクティブ");     
    false を返します。
});

<dl id="thumb-list" >
    <dt></dt>
    <dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
    <dd></dd>
</dl>
于 2009-12-26T23:25:41.463 に答える