javascript - Javascript发行之前/之后

我正在使用当前的Codepen来显示头发处理结果

CODEPEN

但是，一旦我将其添加到我的网站，它就无法正常工作。

我做了一个小提琴，似乎下面的类正在破坏代码（在小提琴上工作正常，但不跟随移动的鼠标指针）。

.wrapper_estudio {
        width: 965px;
        margin: 81px auto 0px auto;
        padding-top: 100px;
    }

编辑
更具体地说，是margin: 81px auto 0px auto;或width: 965px;值。

DEMO (NOT JSFIDDLE)->查看此演示以查看到​​底发生了什么。打开控制台，然后取消选中div wrapper_estudio上的边距（或宽度）。如果未设置边距，为什么会起作用？

DEMO (JS FIDDLE)

$(function(){
    var isDragging = false,
        slide = $('.slide'),
        controls = $('.controls');
    $(".container").mousedown(function() {
        $('.container').mousemove(function(e) {
            var elemOffset = $(this).offset(),
                relX = (e.pageX / $(this).width()) * 100;
            console.log(relX);
            if(relX < 98){
                slide.css('width',relX + '%');
                controls.css('left',relX - 3 + '%');
            }
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $('.container').unbind("mousemove");
    });
  $('.container').mouseleave(function(){
    isDragging = false;
    $(this).unbind("mousemove");
  });
});

最佳答案

您的问题出在relX = (e.pageX / $(this).width()) * 100;上，其中e.pageX如documentation所述获得鼠标相对于文档左边缘的x位置。

现在，当您使用css添加页边距时，.container会从左侧获取一个偏移量，从而产生this fiddle之类的内容，并且该滑块将无法像您的网站或您提供的小提琴中那样正常工作。

为了解决这个问题，您需要像这样修改x坐标：

relX = ((e.pageX-elemOffset.left) / $(this).width()) * 100;

这是从距文档左边缘的距离中减去图像容器的左偏移，从而返回鼠标在元素中的相对位置。

因此，您的最终代码应如下所示：

$(function(){
    var isDragging = false,
        slide = $('.slide'),
        controls = $('.controls');
    $(".container").mousedown(function() {
        $('.container').mousemove(function(e) {
            var elemOffset = $(this).offset(),
                relX = ((e.pageX-elemOffset.left) / $(this).width()) * 100;
            console.log(relX);
            if(relX < 98){
                slide.css('width',relX + '%');
                controls.css('left',relX - 3 + '%');
            }
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $('.container').unbind("mousemove");
    });
  $('.container').mouseleave(function(){
    isDragging = false;
    $(this).unbind("mousemove");
  });
});

这是工作中的fiddle

关于javascript - Javascript发行之前/之后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22475331/