在 mousemove 上平移指定范围内的 div 位置

Posted 2023-04-12

【中文标题】在 mousemove 上平移指定范围内的 div 位置

【英文标题】：On mousemove translate div position within a specified range

【发布时间】：2016-06-21 00:33:41

【问题描述】：

我有一个名为 #mousearea 的包装器，我有一个名为 #mouseshift 的 div 我想做的是，当我将鼠标悬停在 #mousearea 上时，我想在特定范围之间移动 translate3d(0,230%,0) 值。

我已经让 mousemove 工作了，但我目前最终得到了类似 translate3d(7881%,230%,0) 的东西，它太有感觉了，我希望它可以在 0-60% 之类的东西之间转换 X 坐标，所以它更微妙。

这是我目前所拥有的：

jQuery(document).ready(function($)
    $('#mousearea').mousemove(function (e) 

        var shiftAmount = 1;

        $('#mouseshift').css(
            'transform', 'rotate(90deg) translate3d(' + -e.pageY + shiftAmount + '%,230%,0)'
        );
    );
);

更新：

这更接近一点，除了它记录了正确的 translate3d 但没有将其应用于#mouseshift。

$('#mousearea').mousemove(function(e)
        var x = e.pageY - this.offsetTop;
        var transfromPosition = 'translate3d(' + x + ', 230%, 0)';
        console.log(transfromPosition);

        if ((x <= 800)) 
            //$('#mouseshift').css('top': x);
            $('#mouseshift').css('transform', transfromPosition);
        
    );

最终解决方案：

jQuery(document).ready(function($)

    $('#mousearea').mousemove(function(e)

        var min = 50;
        var max = 70;

        var x = e.pageY;
        var windowHeight = window.innerHeight;

        scrolled = (x / windowHeight);
        percentageScrolled = scrolled * 100;

        offsetScroll = max - min;
        offsetPercentage = scrolled * 20;
        translateX = min + offsetPercentage;


        console.log(x + 'px');
        console.log(windowHeight + 'px window height');
        console.log(percentageScrolled + '% scrolled');
        console.log(offsetScroll + 'offset scroll');
        console.log(offsetPercentage + '% offset percentage');




        var transfromPosition = 'rotate(90deg) translate3d(' + translateX + '%, 230%, 0)';
        $('#mouseshift h1').css('transform', transfromPosition);
    );

);

转换为可重复使用的插件我想将其扩展为现在可以处理多个对象，并且每个对象都有不同的最大值和最小值：

这就是我所拥有的，但它似乎会影响所有项目，仅用于元素 max 和 min。

$(function () 
    $('#mouseshift-1, #mouseshift-2').mouseShift();
);    
(function ($) 
    $.fn.mouseShift = function () 
        return this.each(function () 
            var myEl = $(this);
            var min = $(this).data('min');
            var max = $(this).data('max');

            $('#mousearea').mousemove(function (e) 
                var yPosition = e.pageY;
                var windowHeight = window.innerHeight;

                scrolled = (yPosition / windowHeight);
                //percentageScrolled = scrolled * 100;
                offsetRange = max - min;
                offsetRangePercentage = scrolled * 20;
                offset = min + offsetRangePercentage;

                ////  Debug
                console.log('max: ' + max + ', Min:' + min);
                console.log(yPosition + 'px');
                console.log(windowHeight + 'px window height');
                //console.log(percentageScrolled + '% scrolled');
                console.log(offsetRange + 'px offset scroll');
                console.log(offsetRangePercentage + '% offset percentage');

                var transfromPosition = 'rotate(90deg) translate3d(' + offset + '%, 230%, 0)';
                myEl.css('transform', transfromPosition);
            );
        );
    ;
)(jQuery);

为了清楚起见，还有一些 html：

<div class="column"><h1 id="mouseshift-1" data-min="50" data-max="70">boo</h1></div>
      <div class="column"><h1 id="mouseshift-2" data-min="20" data-max="90">bah</h1></div>
      <div class="column"><h1 id="mouseshift-3" data-min="80" data-max="100">bing</h1></div>

【问题讨论】：

我不知道你的最大鼠标位置是多少，但你可以简单地通过x / window.innerWidth * 60 得到一个介于 0 和 60 之间的数字。我唯一不知道的是 width 它是什么应该是，所以window.innerWidth 可能需要被其他东西替换......

【参考方案1】：

我认为您正在寻找的是找到您可以分配的平均值。最好的方法是除以它可以移动的最大量，然后乘以它可以拥有的最大值，所以基本上：

position / maxposition * maxvalue

第一位将返回一个介于0 和1 之间的数字，而最后一位将使其成为介于0 和60 之间的值。下面我构建了一个简单的（jquery-less）版本来展示它是如何工作的：

var mousePointer = document.getElementById('test')

document.addEventListener('mousemove', function(e)
  var x = e.pageX / window.innerHeight;
      x = x * -60;
  mousePointer.style.webkitTransform = 'translateX(' + x + '%)';
  mousePointer.style.transform = 'translateX(' + x + '%)';
)

#test 
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: red;

<div id="test"></div>

更新：可重复使用的代码段

我不太喜欢使用 jQuery，所以它还是 vanilla javascript（但它非常简单）。这就是你试图用可重用插件做的事情吗？

var divs = Array.prototype.slice.call(document.querySelectorAll('[data-range]'));

document.addEventListener('mousemove', function(e)
  
  var eased = e.pageX / window.innerWidth;
  
  divs.forEach(function(div)
    
    var range = div.getAttribute('data-range').split(',');
    var min = parseFloat(range[0]);
    var max = parseFloat(range[1]);
    
    var ease = min + (eased * (max - min));
    
    div.style.webkitTransform = 'translateX(' + ease + '%)';
    div.style.transform = 'translateX(' + ease + '%)';
    
  );
  
);

div 
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  background: gray;


#d2  background: yellow; 
#d3  background: #666; 

<div data-range="60,70" id="d1"></div>
<div data-range="-70,70" id="d2"></div>
<div data-range="-60,-70" id="d3"></div>

【讨论】：

我接受了你的建议，而是找到了屏幕滚动的百分比，然后计算出我的最大值和最小值之间的差异 (70 - 50) = 20 乘以滚动百分比，然后将其添加到我的最小值。所以现在我可以在特定范围内移动翻译百分比。谢谢您的帮助！我在上面发布了我的最终解决方案，欢迎任何进一步的建议。

@Daimz 恭喜，这基本上就是缓动的工作原理 :) 如果你想添加一些额外的比萨，在 0 和 1 之间的 thre 值上使用 Math.pow()，它会给你一些曲线上的酷值！

我走了一条稍微不同的路，决定尝试将它变成一个可重用的插件，我可以为每个对象设置最大值和最小值，它们可以以不同的速率独立移动，但我成功了一个障碍，我在上面发布了我的代码，希望你能提供帮助，即使我意识到它可能超出了问题的范围，也就是说它确实建立在原始问题的基础上:)

@Daimz 我在上面的答案中添加了一个“可恢复的”sn-p，希望对您有所帮助。它们可以以data-range 属性中定义的不同速率独立移动。

【参考方案2】：

从简单的阅读中，我发现您缺少一个 % 符号。应该是这样的：

$('#mousearea').mousemove(function(e)
    var x = e.pageY - this.offsetTop;
    var transfromPosition = 'translate3d(' + x + '%, 230%, 0)';
    console.log(transfromPosition);

    if ((x <= 800)) 
        //$('#mouseshift').css('top': x);
        $('#mouseshift').css('transform', transfromPosition);
    
);

这应该像您的第一个示例一样工作，您确实在 translate3d 字符串中对两个值都使用了 %。

更新：

要将 x 值强制为 0 到 60 之间的值，您需要找到 x 的一对可能的最小值和最大值。然后您可以执行此答案中显示的操作：

Convert a number range to another range, maintaining ratio

【讨论】：

I would like it to translate the X co-ordinate between something like 0-60% so it's far more subtle - 这似乎是 OP 的问题。

是的，但是 OP 还进行了更新，他的代码按照他的预期工作（或至少接近它）并且它缺少一个 %。

是的，但这似乎是一个错字或被遗忘的东西，并且在 cmets 恕我直言中更好，因为它没有回答问题。