Question

请参阅文章中的照片效果：

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

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

Answer 1

很简单。你有2 DIV个2个不同的图像（在css中为background-image）彼此重叠（例如绝对定位。）（也许是＆＃34;之前＆＃34;上图）然后你有一个滑块，拖动它会减少重叠DIV的宽度，使底层DIV显示！这个函数可以在名为＆＃34;之前/之后＆＃34;

的jQuery插件中找到

链接：jQuery BEFORE / AFTER

Answer 2

你当然可以编写自己的，不依赖于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);

你可能需要稍微调整一下，但它主要是在那里。

如何在照片之间制作滑动的东西？

2 个答案: