0

SOのこのリンクを確認しました：Google画像のような画像をポップ

そして、画像のホバー効果を設定しようとしました。

ここでテストしたところ、すべてうまくいきました

// 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);

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

しかし、自分のサイトに追加すると、次のエラーが表示されます

Uncaught TypeError: Property '$' of object [object Window] is not a function
    $('.hovermore').ibox();

サイト内の他のjquery効果が原因だと思います。

これを解決する方法はありますか？

4

5 に答える 5

0

次のコードでコードを開始してみてください。

jQuery(document).ready(function ($) {
于 2012-06-26T14:41:16.963 に答える
0

電話をかける前に、ページにjQueryを含めました$('.hovermore').ibox();か？

また、それは重要ではないと思いますが、最新バージョンのjQueryを使用していることも確認してください。

すべてのコードを表示できるように、機能しないページへのリンクを投稿できますか？

于 2012-06-26T14:45:03.720 に答える
0

これは、 jQuery をロードするのを忘れたためです:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
于 2012-06-26T14:43:02.897 に答える
0

jQuery ライブラリを含めるのを忘れていました。

このデモにアクセスし、[保存] -> [ダウンロード] に移動して、ダウンロードしたファイルを確認してください。

http://jsbin.com/ifefop/edit#javascript,html,live

ドキュメントには次のものが必要です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

また、スクリプトを外部ファイルに配置した場合:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/ibox.js"></script>
于 2012-06-26T14:48:21.183 に答える
0

してみてください

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

また

jQuery(document).ready(function() {
    jQuery('.item').ibox();
});
于 2012-06-26T14:54:23.517 に答える