1

このJSをページ上で実行し、

しかし、jsをクリアしjQuery.noConflict();ても機能しません。

JS コンソールを確認しましたが、これは画像にカーソルを合わせたときにのみ機能するため、うまくいきませんでした。

Q:

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

どちらかといえば、これを行う場合、書き換えは必要ありません。

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