Question

我正在尝试创建一个页面，其前后图像使用基于鼠标移动的滑块来显示两个图像。我需要在页面上有多个滑块，似乎无法让它们工作。以下是我发现的几个不同的例子以及我遇到的挑战。

http://codepen.io/dudleystorey/pen/JDphy - 这适用于移动设备但我似乎无法添加第二个版本而不为每个图像添加css，因为背景图片嵌入在CSS中。

div#inked-painted { 
  position: relative; font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#inked-painted img { 
  width: 100%; height: auto; 
}
div#colored { 
  background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 50%;
  background-size: cover; 
}

http://codepen.io/ace/pen/BqEer - 这是另一个与移动设备不兼容的示例。我可以添加第二张图像，但滑块可以同时处理所有图像，而不是在添加第二张图像时单独处理。

任何人都可以帮助添加第二张图片。我确信这两个都非常可行，但我遗漏了一些不允许多个图像的css / javascript知识。

Answer 1

您需要遍历所有类以便能够单独设置事件处理程序。您的codepen示例可以更改为此以立即处理单个图像：

var blackWhiteElements= document.getElementsByClassName("black_white");

for (i = 0; i < blackWhiteElements.length; i++) {   
  initCode($(blackWhiteElements[i]));
}


function initCode($black_white) {
var img_width = $black_white.find('img').width();

var init_split = Math.round(img_width/2);

$black_white.width(init_split);  

        $black_white.parent('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
            $black_white.width(offX);
        });
        $black_white.parent('.before_after_slider').mouseleave(function(e){
        $black_white.stop().animate({
        width: init_split
        },1000)
        });
}

codepen：http://codepen.io/anon/pen/mJPmKV

Answer 2

你的第一次尝试已经足够了。

在html中内联分配背景图片以避免额外的课程

<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>

将background-size上的#colored更改为background-size: auto 100%;以减少＆＃34;摇摇欲坠的＆＃34;效果

background-size: auto 100%;

具有多个图像的滑块之前和之后

2 个答案: