0

こちらの記事の写真で効果を確認してください。

http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation

誰かがそれがどのように行われたか知っていますか? 固定枠内に幅を調整できる枠を2つ作ることもできると思いますが、ハンドルはどうですか？また、マウスオーバーするとフレームラインとハンドルが明るく拡大する様子は？確かにホバーイベントですが、どのようなホバーイベントですか？

4

2 に答える 2

2

とてもシンプルです。DIV2 つの異なる画像 (css のように) が互いに重なり合っている 2 つの s があります (background-imageたとえば、絶対配置で) (おそらく上の「前」の図)。次に、スライダーがあり、ドラッグすると、重なり合うDIVの幅が減少し、下敷きDIVショー！この機能は、「Before/After」と呼ばれる jQuery プラグインにあります。

リンク: jQuery BEFORE / AFTER

于 2012-11-04T15:14:29.087 に答える
1

もちろん、jQuery UI に依存しない独自のものを作成することもできます。

;(function($){
    $.fn.slidingThingamajig = function () {

        return this.each(function(){

            var $this = $(this);

            $this.find('.handle')
                 .css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
                 .on('mousedown', function(e) {
                     $this.addClass('resizable');

                     $this.parents().on('mousemove', function (e) {
                         $('.resizable').css({width:e.pageX - $('.resizable').offset().left});
                     }).on('mouseup', function(e) {
                         $('.resizable').removeClass('resizable');
                 });
                e.preventDefault();
            });
        });
    }
})(jQuery);

おそらくこれを少し調整する必要がありますが、ほとんどすべて揃っています。

于 2012-11-04T15:28:09.327 に答える