Jquery 图片悬停效果错误答案

【问题标题】：Jquery Image hover effect ErrorJquery 图片悬停效果错误
【发布时间】：2012-06-27 21:58:11
【问题描述】：

我查看了 S.O 的这个链接：Pop Images like Google Images

并尝试设置图像悬停效果。

当我在here 中测试时一切正常

// 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 效果。

有没有办法解决这个问题？

【问题讨论】：

你记得链接到这个页面上的 jQuery 库吗？此外，我在导致类似错误的代码库之间存在冲突，请尝试在代码中将 $ 替换为单词 jQuery，例如jQuery('.hovermore').ibox
@Mike 在我添加 jQuery 而不是 $ 之后它起作用了。但我看到悬停图像效果仅适用于第一个 div 容器。而在其他容器中，效果不起作用。它还有另一种悬停效果，当这种悬停效果起作用时，它不起作用。顺便说一句windows7themer.com 这是我的网站。所以请指导我这个以及如何更改图像的宽度。

标签： javascript jquery wordpress

【解决方案1】：

请尝试

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

或

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

【讨论】：

感谢您的支持。在我添加 jQuery 而不是 $ 之后它起作用了。但我看到悬停图像效果仅适用于第一个 div 容器。而在其他容器中，效果不起作用。它还有另一种悬停效果，当这种悬停效果起作用时，它不起作用。顺便说一句 windows7themer.com 是我的网站。因此，请指导我以及如何更改图像的宽度。问候，里亚斯

【解决方案2】：

那是因为你忘记加载 jQuery 了：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

【讨论】：

【解决方案3】：

在调用$('.hovermore').ibox(); 之前，您是否在页面中包含了 jQuery？

另外，我认为这无关紧要，但也要确保您使用的是最新版本的 jQuery。

您能否发布一个链接到它不起作用的页面，以便我们查看所有代码？

【讨论】：

【解决方案4】：

您忘记包含 jQuery 库。

访问this 演示，转到保存 -> 下载并查看下载的文件。

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>

【讨论】：

在我添加 jQuery 而不是 $.但我看到悬停图像效果仅适用于第一个 div 容器。而在其他容器中，效果不起作用。它还有另一种悬停效果，当这种悬停效果起作用时，它不起作用。顺便说一句 windows7themer.com 是我的网站。所以请指导我这个以及如何改变图像的宽度。

【解决方案5】：

尝试使用以下代码开始您的代码：

jQuery(document).ready(function ($) {

【讨论】：

对不起，我不明白为什么我的答案行不通，而 HADI 的意愿
啊，我在看第一段代码，这不是一个好问题，但无论如何。