-2

私はjqueryにまったく慣れていないので、以下のルーペを使用することにしました。なんとか起動して動作させましたが、スクリプトに簡単なフェードインとフェードアウトを追加したいと思います。どこにどのように配置するかについてのアイデア。私はいくつかのことを試みましたが失敗しました。アドバイスをいただければ幸いです。どうもありがとうGK

    /**
    * loupe - an image magnifier for jQuery
    * (C) 2010 jdbartlett, MIT license
    * http://github.com/jdbartlett/loupe
    */

    (function ($) {
$.fn.loupe = function (arg) {
    var options = $.extend({
        loupe: 'loupe',
        width: 200,
        height: 150
    }, arg || {});

    return this.length ? this.each(function () {
        var $this = $(this), $big, $loupe,
            $small = $this.is('img') ? $this : $this.find('img:first'),
            move, hide = function () { $loupe.hide(); },
            time;

        if ($this.data('loupe') != null) {
            return $this.data('loupe', arg);
        }           

        move = function (e) {
            var os = $small.offset(),
                sW = $small.outerWidth(),
                sH = $small.outerHeight(),
                oW = options.width / 2,
                oH = options.height / 2;

            if (!$this.data('loupe') ||
                e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
                e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
                return hide();
            }

            time = time ? clearTimeout(time) : 0;

            $loupe.show().css({
                left: e.pageX - oW,
                top: e.pageY - oH
            });
            $big.css({
                left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0,
                top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0
            });
        };

        $loupe = $('<div />')
            .addClass(options.loupe)
            .css({
                width: options.width,
                height: options.height,
                position: 'absolute',
                overflow: 'hidden'
            })
            .append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
            .mousemove(move)
            .hide()
            .appendTo('body');

        $this.data('loupe', true)
            .mouseenter(move)
            .mouseout(function () {
                time = setTimeout(hide, 10);
            });
    }) : this;
};
    }(jQuery));
4

2 に答える 2

0

$loupe.show()forを置き換えると$loupe.fadeIn()うまくいくはずです。$loupe.hide() も探して、非表示を に置き換え.fadeOut()ます。そのルーペ プラグインが機能するのを見たことがありませんが、コードはそれほど複雑ではありません。jQuery がどのように機能するかをよりよく理解するために、コードをいじって学習実験として使用する必要があります。

于 2013-11-04T10:57:39.453 に答える
0

このコードへの小さな編集は、探しているものを実行するはずです

Javascript:

  (function ($) {
    $.fn.loupe = function (arg) {
        var options = $.extend({
            loupe: 'loupe',
            width: 200,
            height: 150
        }, arg || {});

        return this.length ? this.each(function () {
            var $this = $(this), $big, $loupe,
                $small = $this.is('img') ? $this : $this.find('img:first'),
                move, hide = function () { $loupe.fadeOut(); },
                time;

            if ($this.data('loupe') != null) {
                return $this.data('loupe', arg);
            }           

            move = function (e) {
                var os = $small.offset(),
                    sW = $small.outerWidth(),
                    sH = $small.outerHeight(),
                    oW = options.width / 2,
                    oH = options.height / 2;

                if (!$this.data('loupe') ||
                    e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
                    e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
                    return hide();
                }

                time = time ? clearTimeout(time) : 0;

                $loupe.fadeIn().css({
                    left: e.pageX - oW,
                    top: e.pageY - oH
                });
                $big.css({
                    left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0,
                    top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0
                });
            };

            $loupe = $('<div />')
                .addClass(options.loupe)
                .css({
                    width: options.width,
                    height: options.height,
                    position: 'absolute',
                    overflow: 'hidden'
                })
                .append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
                .mousemove(move)
                .hide()
                .appendTo('body');

            $this.data('loupe', true)
                .mouseenter(move)
                .mouseout(function () {
                    time = setTimeout(hide, 10);
                });
        }) : this;
    };
  }(jQuery));
于 2013-11-04T10:58:08.387 に答える