Question

我想创建一个动画，当鼠标接近某个元素时，颜色会发生变化。我找到了fiddle，其中显示了鼠标距离。有没有一种有效的方法通过数字输出实现颜色变化？我在JavaScript方面不是很有经验，所以我一直在寻找可以提供帮助的内容，并找到了这段代码片段：

<p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>

var percent_number_step = $.animateNumber.numberStepFactories.append(' %')

$('#fun-level').animateNumber({
    number: 100,
    color: 'green',
    'font-size': '30px',
    easing: 'easeInQuad',
    numberStep: percent_number_step
  },
  15000
);

但我不确定如何将其应用于我的情况。我还发现这个jQuery plugin完全符合我的要求，但颜色变化不起作用，所以我想自己重做这个脚本。

Answer 1

你想要这个吗？

当您接近圆圈时，此代码会变暗。

Range

var ball = document.getElementById('ball')
document.addEventListener('mousemove', mouseMoveHandler)
function mouseMoveHandler (e) {
     var x = e.clientX
     var y = e.clientY

     var diffX = Math.abs(x - ball.offsetLeft)
     var diffY = Math.abs(y - ball.offsetTop)
     ball.style.backgroundColor = `rgb(${diffX}, ${diffY}, ${diffX + diffY})`
}

#ball {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 50px;
     background-color: gray;

     border-radius: 50%;
     left: 50%;
     top: 50%;
     margin-top: -25px;
     margin-left: -25px;
}

按数字设置CSS属性动画

1 个答案: