1

我在页面上运行这个 JS，

但如果我用它清除 jsjQuery.noConflict();将不起作用。

我检查了 JS 控制台，但没有运气，因为这仅在将鼠标悬停在图像上时才有效。

问：

什么jQuery.noConflict();对这段代码不起作用？

我的想法如何解决它：

那$必须换成 propper jQuery，但是我对 jQuery 不是很好，也不知道，$必须换成哪个。如果是这样，我应该在代码中替换哪个？$

例子：

// Start
        $.mglass = function(element, options) {

用。。。来代替

// Start
        jQuery.mglass = function(element, options) {

感谢您的回答、更正和代码。

JS：

这个 JS 做了什么，它在图像悬停时显示一个放大镜

来源：https ://github.com/younes0/jQuery-MGlass

jquery library code here ...

jQuery.noConflict();

(function($) {

    // Start
    $.mglass = function(element, options) {

        // Defaults
        var defaults = {
            opacity: 0.4,
            speed: 150,
            wrapper: true
        };

        var plugin = this, $element = $(element);

        plugin.settings = {};


        // Constructor
        plugin.init = function() {

            plugin.settings = $.extend({}, defaults, options);

            if (plugin.settings.wrapper) {
                $element.wrap('<div class="mglassWrapper" />');
            }

            var 
                h = $element.height(), 
                w = $element.width(),
                b = $element.css('border-top-width')
            ;

            var overlayStyle = 'width: '+w+'px; height: '+h+'px;'; 

            // if original image has border (border-top as reference), set width as margin
            if (b) {
                overlayStyle+= 'margin: '+b+';';
            }

            // CSS3 transition Support ?
            if (typeof $.css3Transitions === 'undefined') {
                $.css3Transitions = plugin.supportsTransitions();
            }
            if ($.css3Transitions) {
                overlayStyle+= $.fn.mglass.transitionProperty+': opacity '+(plugin.settings.speed/1000)+'s ease;';
            }

            // Mglass Div
            $overlay = $('<div class="mglass" style="'+overlayStyle+'"></div>');
            $overlay.insertBefore($(element));

            // No CSS3 transition support : javascript fallback
            if ( ! $.css3Transitions) {
                $overlay.hover(
                    function () {
                        $(this).stop().animate({"opacity": plugin.settings.opacity}, plugin.settings.speed);
                    },
                    function () {
                        $(this).stop().animate({"opacity": 0}, 100);
                    }
                );
            }


        },

        plugin.supportsTransitions = function() {

            var el      = document.createElement('div');
            var vendors = ['', 'Ms', 'Moz', 'Webkit', 'O'];

            for (var i = 0, len = vendors.length; i < len; i++) {
                var prop = vendors[i] + 'Transition';
                if (prop in el.style) {
                    $.fn.mglass.transitionProperty = '-'+vendors[i].toLowerCase()+'-transition';
                    return true;
                }
            }

            return false;

        };


        // Init
        plugin.init();

    };

    // Add the plugin to the jQuery.fn object
    $.fn.mglass = function(options) {
        return this.each(function() {
            if (undefined === $(this).data('mglass')) {
                var plugin = new $.mglass(this, options);
                $(this).data('mglass', plugin);
            }
        });
    };

// End
})(jQuery);

然后在 HTML 中，我将其发布在页面内容的末尾

<script>
   jQuery("img").mglass({
       opacity: 0.5
    });
</script>
4

3 回答 3

0

实际上，该插件似乎正在“运行”，尽管它可能无法获得您想要的结果。

请参阅此小提琴底部的代码（Moo 工具在页面上提供了冲突处理$）。我为 $.mglass 作用的元素添加了一个简单的淡入淡出，并在页面上的图像上调用插件。插件创建的fadeto触发器和.mglass包装器 div 被添加到 DOM。

关于为什么这不起作用的一个初步想法是 CSS，您是否将mglassCSS 添加到您的页面？

于 2013-08-16T13:57:01.167 回答
0

解决方案是在编辑的代码中，我(function($) { }在代码前面添加了，这样$可以操作，并且不会跨越其他库

于 2013-08-16T14:49:50.573 回答
0

如果有的话，如果您这样做，则无需重写：

(function ($) {
    // your old code here
}(jQuery.noConflict()));
于 2013-08-16T14:56:02.960 回答