Javascript 如何在照片之间制作滑动物体？

请参见本文照片中的效果：

---

有人知道是怎么做到的吗？我想我可以在一个固定的框架内制作两个宽度可调的框架，但是把手呢？当你把鼠标移到画面上时，画面线条和手柄是怎样变亮和放大的呢？当然是悬停事件，但是什么样的悬停事件呢？

非常简单。您有两个

DIV

s，其中两个不同的图像（作为css中的

背景图像

）相互重叠（例如绝对定位）（可能是上面的“Before”图片） 然后你有一个滑块，当拖动它时，它会减小重叠的

DIV

的宽度，使基线DIV显示出来！ 这种功能可以在一个名为“Before/After”的jQuery插件中找到

---

链接：

非常简单。您有两个

DIV

s，其中两个不同的图像（作为css中的

背景图像

）相互重叠（例如绝对定位）（可能是上面的“Before”图片） 然后你有一个滑块，当拖动它时，它会减小重叠的

DIV

的宽度，使基线DIV显示出来！ 这种功能可以在一个名为“Before/After”的jQuery插件中找到

---

链接：

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

---

您可能需要对此进行一些调整，但大部分都在那里。

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

---

您可能需要对此进行一些调整，但大部分都在那里。

对于亮显，只需使用CSS

：hover

对于亮显，只需使用CSS

：hover

但是他们是如何将漂亮的手柄放在滑块上的，带有箭头的？@Aerovistae，这些都是通过jQuery插件生成的！：）是的，我想我是说插件作者是怎么做到的？如果你能马上知道你为了达到那种效果而搞砸了什么。我只是对jQuery不够精通，不知道如何做到这一点。但他们是如何将漂亮的手柄和箭头一起放在滑块上的呢？@Aerovistae这都是通过jQuery插件生成的！：）是的，我想我是说插件作者是怎么做到的？如果你能马上知道你为了达到那种效果而搞砸了什么。我只是对jQuery不够精通，不知道如何做到这一点。