0

私のサイトhttp://windows7themer.comでGoogle画像検索のように画像にホバー効果を実装しようとしましたが、最初のdivセクションでのみ機能します。

そのページには、約5つの繰り返しdivセクションがあります。また、Google画像のように画像のサイズを可変サイズに変更したいと思います。

これが元のjsfiddleです：http：//jsfiddle.net/roXon/HmTrw/

// ibox image zoomer plugin // roXon

(function($) {
    $.fn.ibox = function() {

        // set zoom ratio //
        resize = 20;
        ////////////////////
        var img = this;
        img.parent().append('<div id="ibox" />');
        var ibox = $('#ibox');
        var elX = 0;
        var elY = 0;

        img.each(function() {
            var el = $(this);

            el.mouseenter(function() {
                ibox.html('');
                var elH = el.height();
                elX = el.position().left - 6; // 6 = CSS#ibox padding+border
                elY = el.position().top - 6;
                var h = el.height();
                var w = el.width();
                var wh;
                checkwh = (h < w) ? (wh = (w / h * resize) / 2) : (wh = (w * resize / h) / 2);

                $(this).clone().prependTo(ibox);
                ibox.css({
                    top: elY + 'px',
                    left: elX + 'px'
                });

                ibox.stop().fadeTo(200, 1, function() {
                    $(this).animate({top: '-='+(resize/2), left:'-='+wh},400).children('img').animate({height:'+='+resize},400);
                });
            });

            ibox.mouseleave(function() {
                ibox.html('').hide();
            });
        });
    };
})(jQuery);

jQuery(document).ready(function() {
    jquery('.item').ibox();
});

これで私を導いてください。

4

1 に答える 1

1

私はあなたのウェブサイトをチェックしました、そして問題はあなたのCSSから来ます：

media="all"
.grid-view, .list-view {
position: relative;
display: inline-block;
float: left;
clear: both;
width: 100%;
}

削除する必要がposition: relative;あり、それは機能します。

また、交換してみてください

$(this).animate({top: '-='+(resize/2), left:'-='+wh},400).children('img').animate({height:'+='+resize},400)

に

$(this).animate({top: '-='+(resize/2), left:'-='+wh},400).find('img').animate({height:'+='+resize},400)

于 2012-06-26T16:44:16.027 に答える