Question

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

我已经让鼠标移动了，但我目前最终得到像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>

Answer 1

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

position / maxposition * maxvalue

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

＆＃13;

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 + '%)';
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

我不喜欢使用jQuery，所以再一次它将是vanilla javascript（但它非常简单）。那是你的 - 尝试用可重复使用的插件吗？

＆＃13;

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 + '%)';
    
  });
  
});

＆＃13;

div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  background: gray;
}

#d2 { background: yellow; }
#d3 { background: #666; }

＆＃13;

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

＆＃13;

Answer 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

在mousemove上翻译指定范围内的div位置

2 个答案:

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