0

在此处查看文章中照片中的效果：

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

有谁知道这是怎么做到的？我想我可以在一个固定框架内制作两个宽度可调的框架，但是手柄呢？当鼠标悬停时，框架线和手柄变亮和放大的方式？可以肯定的是，悬停事件，但是什么样的悬停事件？

4

2 回答 2

2

这很简单。你有 2 DIVs 与 2 个不同的图像（如background-image在 css 中）相互重叠（例如绝对定位。）（也许是上面的“之前”图片）然后你有一个滑块，当拖动它时会减小重叠DIV的宽度，使底层DIV秀！此功能可以在名为“Before/After”的 jQuery 插件中找到

链接：jQuery之前/之后

于 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 回答