javascript - jquery 在 jQuery.noConflict() 之后重写；

Question

我在页面上运行这个JS，

但是如果我用jQuery.noConflict();清除js，它将不起作用。

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

问:

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

我的想法如何解决它:

那个 $ 必须替换为合适的 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>

Answer 1

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

请参阅底部的代码 fiddle (Moo工具在页面上提供了$上的冲突)。我向 $.mglass 作用的元素添加了一个简单的淡入淡出，并在页面上的图像上调用了该插件。 fadeto 触发，并且插件创建的 .mglass 包装器 div 被添加到 DOM。

关于为什么这不起作用的第一个想法是 CSS，您是否已将 mglass css 添加到您的页面中？