0

次のプラグインを使用しています

http://playground.mobily.pl/jquery/mobily-notes/demo.html

これは非常に優れたスタックを提供しますが、問題はギャラリーに使用する場合です。すべてのアルバムは自動回転で、奇妙に見えます。自動実行の代わりにdivにカーソルを合わせた後、少なくともプラグインを実行する方法はありますか? これを実行するメインコードは

$(function(){
    $('.notes_img').mobilynotes({
        init: 'rotate',
        showList: false,
        positionMultiplier: 5
    });
});
4

3 に答える 3

2

@username が中断したところ (素晴らしい作業) を引き継ぎ、構成オプションに次の変更を加えてユーザー名のフィドルを分岐しました。

変更 (@username のコードから):

  • hover: (ブール値) ホバーすると、autoplay

新しい:

  • click: (ブール値) クリックすると、次の音符に進み、アクティブな場合はホバー状態で自動再生を再開します。

内部的には、 newとnextfunctionsおよび modifiedstopとfunctions がオプション (の組み合わせ) を処理します。restartinitautoplayanimate

最もトリッキーな部分は、(クリック アクション) の完了animate後に自動再生を再開させるコールバックを提供することでした。nextこれは、他のいくつかの機能に影響を与えます。(熟考すると、間違いなくより良い使用方法deferredsがあります-私はそれについて考えます)

@Sakshi Sharmaの元の質問を反映した設定のフィドル(またはこのフルページバージョン)を次に示します。clickは true に設定しましたが、好みに応じて false に設定することもできます。

コードは次のとおりです。

(function($) {
    $.fn.mobilynotes = function(options) {
        var defaults = {
            init: "rotate",
            positionMultiplier: 5,
            title: null,
            showList: true,
            autoplay: false,
            hover: true,//when true, hovering  reverses autoplay; when false, has no effect.
            click: true,
            interval: 4000,
            index: 1
        };
        var settings = $.extend({}, defaults, options);
        return this.each(function() {
            var $t = $(this),
                note = $t.find(".note"),
                size = note.length,
                autoplay,
                currentIndex = 1;
            var notes = {
                init: function() {
                    notes.css();
                    if (settings.showList) {
                        notes.list();
                    }
                    if (settings.hover) {
                        var fn1 = settings.autoplay ? notes.stop : notes.restart;
                        var fn2 = settings.autoplay ? notes.restart : notes.stop;
                        $t.hover(fn1, fn2);
                    }
                    if (settings.click) {
                        clearInterval(autoplay);
                        //autoplay 0, hover 0: null
                        //autoplay 0, hover 1: autoplay
                        //autoplay 1, hover 0: autoplay
                        //autoplay 1, hover 1: null
                        var callback = ( (settings.autoplay && !settings.hover) || (!settings.autoplay && settings.hover) ) ? notes.autoplay : null;
                        $t.click(function(){
                            notes.next(callback);
                        });
                    }
                    if (settings.autoplay) {
                        notes.autoplay();
                    }
                    notes.show();
                },
                random: function(l, u) {
                    return Math.floor((Math.random() * (u - l + 1)) + l);
                },
                css: function() {
                    var zindex = note.length;
                    note.each(function(i) {
                        var $t = $(this);
                        switch (settings.init) {
                        case "plain":
                            var x = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
                                y = notes.random(-(settings.positionMultiplier), settings.positionMultiplier);
                            $t.css({
                                top: y + "px",
                                left: x + "px",
                                zIndex: zindex--
                            });
                            break;
                        case "rotate":
                            var rotate = notes.random(-(settings.positionMultiplier), settings.positionMultiplier),
                                degrees = "rotate(" + rotate + "deg)";
                            $t.css({
                                "-webkit-transform": degrees,
                                "-moz-transform": degrees,
                                "-o-transform": degrees,
                                filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
                                zIndex: zindex--
                            })
                        }
                        $t.attr("note", i)
                    });
                },
                zindex: function() {
                    var arr = new Array();
                    note.each(function(i) {
                        arr[i] = $(this).css("z-index")
                    });
                    var z = Math.max.apply(Math, arr);
                    return z
                },
                list: function() {
                    $t.after($("<ul />").addClass("listNotes"));
                    var ul = $t.find(".listNotes"),
                        title = new Array();
                    if (settings.title != null) {
                        note.each(function(i) {
                            title[i] = $(this).find(settings.title).text()
                        })
                    } else {
                        title[0] = "Bad selector!"
                    }
                    for (x in title) {
                        $t.next(".listNotes").append($("<li />").append($("<a />").attr({
                            href: "#",
                            rel: x
                        }).text(title[x])))
                    }
                },
                next: function(callback) {
                    callback = (!callback || typeof callback !== 'function') ? null : callback;
                    currentIndex = currentIndex % size;
                    notes.animate(note.eq(currentIndex), callback);
                    currentIndex++;
                },
                autoplay: function() {
                    notes.stop();
                    autoplay = setInterval(notes.next, settings.interval);
                },
                stop: function() {
                    clearInterval(autoplay);
                },
                restart: function() {
                    notes.next(notes.autoplay);
                },
                show: function() {
                    $t.next(".listNotes").find("a").click(function() {
                        var $t = $(this),
                            nr = $t.attr("rel"),
                            div = note.filter(function() {
                                return $(this).attr("note") == nr;
                            });
                        clearInterval(autoplay);
                        notes.animate(div);
                        return false;
                    })
                },
                animate: function(selector, callback) {
                    var width = selector.width(),
                        position = selector.css("left"),
                        z = notes.zindex();
                    selector.animate({
                        left: width + "px"
                    }, function() {
                        selector.css({
                            zIndex: z + 1
                        }).animate({
                            left: position
                        }, function(){
                            if(callback) {
                                callback();
                            }
                        });
                    });
                }
            };
            notes.init()
        })
    }
}(jQuery));
于 2012-04-20T00:49:23.000 に答える
2

注意:私は作者ではありませんが、MIT ライセンスのプラグインであるため、ここで変更して再配布しても問題はありません。

プラグインの見栄えにも関わらず、拡張できるほど柔軟ではありません。代わりに私の修正版を使用できます。

mobilynotes.js:

(function ($) {
    $.fn.mobilynotes = function (options) {
        var defaults = {
            init: "rotate",
            positionMultiplier: 5,
            title: null,
            showList: true,
            autoplay: true,
            interval: 4000,
            hover:    true,
            index:    1
        };
        var sets = $.extend({}, defaults, options);
        return this.each(function () {
            var $t = $(this),
                note = $t.find(".note"),
                size = note.length,
                autoplay;
            var notes = {
                init: function () {
                    notes.css();
                    if (sets.showList) {
                        notes.list()
                    }
                    if (sets.autoplay) {
                        notes.autoplay()
                    }
                    if (sets.hover) {
                        notes.hover()
                    }
                    notes.show()
                },
                random: function (l, u) {
                    return Math.floor((Math.random() * (u - l + 1)) + l)
                },
                css: function () {
                    var zindex = note.length;
                    note.each(function (i) {
                        var $t = $(this);
                        switch (sets.init) {
                        case "plain":
                            var x = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
                                y = notes.random(-(sets.positionMultiplier), sets.positionMultiplier);
                            $t.css({
                                top: y + "px",
                                left: x + "px",
                                zIndex: zindex--
                            });
                            break;
                        case "rotate":
                            var rotate = notes.random(-(sets.positionMultiplier), sets.positionMultiplier),
                                degrees = "rotate(" + rotate + "deg)";
                            $t.css({
                                "-webkit-transform": degrees,
                                "-moz-transform": degrees,
                                "-o-transform": degrees,
                                filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + rotate + ")",
                                zIndex: zindex--
                            })
                        }
                        $t.attr("note", i)
                    })
                },
                zindex: function () {
                    var arr = new Array();
                    note.each(function (i) {
                        arr[i] = $(this).css("z-index")
                    });
                    var z = Math.max.apply(Math, arr);
                    return z
                },
                list: function () {
                    $t.after($("<ul />").addClass("listNotes"));
                    var ul = $t.find(".listNotes"),
                        title = new Array();
                    if (sets.title != null) {
                        note.each(function (i) {
                            title[i] = $(this).find(sets.title).text()
                        })
                    } else {
                        title[0] = "Bad selector!"
                    }
                    for (x in title) {
                        $t.next(".listNotes").append($("<li />").append($("<a />").attr({
                            href: "#",
                            rel: x
                        }).text(title[x])))
                    }
                },
                autoplay: function () {
                    var i = 1,
                        autoplay = setInterval(function () {
                            i == size ? i = 0 : "";
                            var div = note.eq(i),
                                w = div.width(),
                                left = div.css("left");
                            notes.animate(div, w, left);
                            i++
                        }, sets.interval)
                },
                hover: function () {
                    $t.hover(function() {
                        var div = note.eq(sets.index),
                        w = div.width(),
                        left = div.css("left");
                        sets.index == size ? sets.index = 1 : sets.index += 1;
                        notes.animate(div, w, left);
                    },
                    function() {}
                    );
                },
                show: function () {
                    $t.next(".listNotes").find("a").click(function () {
                        var $t = $(this),
                            nr = $t.attr("rel"),
                            div = note.filter(function () {
                                return $(this).attr("note") == nr
                            }),
                            left = div.css("left"),
                            w = div.width(),
                            h = div.height();
                        clearInterval(autoplay);
                        notes.animate(div, w, left);
                        return false
                    })
                },
                animate: function (selector, width, position) {
                    var z = notes.zindex();
                    selector.animate({
                        left: width + "px"
                    }, function () {
                        selector.css({
                            zIndex: z + 1
                        }).animate({
                            left: position
                        })
                    })
                }
            };
            notes.init()
        })
    }
}(jQuery));

新機能の使用:

$('.notes_img').mobilynotes({
        init: 'rotate',
        showList: false,
        autoplay: false,
        index: 1, //starting index (new)
        hover: true // (new)
    });
于 2012-04-19T05:15:08.113 に答える
0

こんにちは、ここにデモがあります:)これが役立つことを願っています: http://jsfiddle.net/haf6J/14/show/ && http://jsfiddle.net/haf6J/14/ OR http://jsfiddle.net/haf6J/ 3/show/ && http://jsfiddle.net/haf6J/3/

これで、画像にカーソルを合わせると回転が開始されます。さらにマウスを 1 つ離したい場合は、イベント.mouseoutを調べて、回転を停止する、つまり効果を削除することができます。

エパスカレロのように、ドキュメントはここにありますhttp://playground.mobily.pl/jquery/mobily-notes.html

私に知らせてください。これが役立つ場合は受け入れることを忘れないでください(そして賛成票を投じてください:))乾杯

Jクエリコード

$('.notes_img').hover(function() {
    $('.notes_img').mobilynotes({
        init: 'rotate',
        showList: false
    });

});​
于 2012-04-19T04:00:38.557 に答える