Javascript JS：将轻松添加到移动元素

我在一个有一个中心元素的站点上工作，我想让这个元素与游标交互。这就是我到目前为止所做的：

var hello=document.getElementsByClassName（“hello”）；
document.onmousemove=函数（）{
var x=event.clientX*100/window.innerWidth+“%”；
变量y=event.clientY*100/window.innerHeight+“%”；
对于（var i=0；i我们可以使用

添加为示例
transition:transform 0.6s立方体贝塞尔（0.32,0,0.67,0）
到您的css中。此示例将在鼠标移动0.6s后将中心的元素带回来

有关转换的许多示例，请参见



var hello=document.getElementsByClassName（“hello”）[0]；
document.onmousemove=函数（）{
var x=event.clientX*100/window.innerWidth+“%”；
变量y=event.clientY*100/window.innerHeight+“%”；
hello.style.left=x；
hello.style.top=y；
hello.style.transform=“translate（-“+x+”，-“+y+”）；
}
*{
填充：0；
保证金：0；
}
身体{
背景色：黑色；
}
.你好_wrapper _wrapper{
位置：绝对位置；
背景色：无；
/*背景颜色：蓝色*/
宽度：35vw；
/*此对象必须大于：宽度：300px；高度：150px*/
高度：35vh；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.你好{
位置：相对位置；
背景色：无；
宽度：35vw；
高度：35vh；
}
.你好{
位置：绝对位置；
背景色：白色；
宽度：300px；
高度：150像素；
文本对齐：居中；
线高：150px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
变换：变换0.6s三次贝塞尔（0.32,0,0.67,0）
}

0
你好，世界！
您可以使用CSS转换属性来确保转换平滑

我尝试向hello元素CSS添加
转换延迟：10ms
，
转换计时功能：ease
。更多信息请参见：和

现在，为了确保框不会移动，您可以尝试在主体上使用
onmouseout
事件侦听器

当鼠标离开窗口时，请尝试使用以下javascript代码使转换平滑：

var hello = document.getElementsByClassName("hello");


document.onmouseleave = function(){
for(var i=0;i<2;i++){
    hello[i].style.left = '50%';
    hello[i].style.top = '50%';
    hello[i].style.transform = "translate(-50%,-50%)";
  }
  document.removeEventListener('onmousemove')
    
}


document.onmouseenter = function(){
    setTimeout(function(){
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    
    for(var i=0;i<2;i++){
        hello[i].style.left = x;
        hello[i].style.top = y;
        hello[i].style.transform = "translate(-"+x+",-"+y+")";
    }
}
  },1000)
    
}

var hello=document.getElementsByClassName（“hello”）；
document.onmouseleave=函数（）{
对于（var i=0；i如何在循环中添加
setTimeout
？这将延迟动画的持续时间，不管您想设置多长时间。这不会产生“缓解”效果，但会允许您查看的延迟for@Sal我马上就要试试这个了。：）请始终在问题中包含a，因为我刚刚did@SimonR.是我编辑了这个问题，用实际的代码替换，它也抛出了同样的错误（
“Uncaught TypeError:无法读取未定义的属性'style'”
）@AlonEitan谢谢你的输入！我更新了这个问题，现在它可以正常工作了，没有任何错误。：）这很酷，但这并不完全是我想要做的，我希望长方体只返回到它的原始位置，当光标离开视口时，元素也不会总是返回到我的原始位置…但是感谢您的输入！您必须尝试链接上的许多示例中的一个好吧！我正在研究它。：）要在mouseout上设置位置，您必须使用javascript切换或添加一个类。对不同的转换使用不同的css类^Hey，谢谢！…但是仍然存在一个问题：假设我在页面上移动光标，然后我离开页面，光标在视口的左侧，我在监视器上的其他位置工作，然后我在再次点击视口，在视口的右侧，然后框会跳转…我能不能不跳转，而是轻松地沿着光标的方向移动？我想你可以在主体上使用onmouseenter事件监听器，然后使用onmouseleave来获得该功能。在回答中的JS代码中，添加一行代码来重新设置当鼠标离开身体时移动mousemove事件监听器。我对JS没有太多经验，我似乎无法让它工作。：/你能帮我实现这个，或者给我更详细的说明吗？–抱歉。当然，Simon，没有问题。我在回答中的JS代码应该可以工作。如果不行，请告诉我。好的，很好。是的，我正在尝试无法使用ease属性，但我无法获得它。我建议尝试一种方法，将其重新设置动画。使用JQuery animate。详细信息如下：
var hello = document.getElementsByClassName("hello");


document.onmouseleave = function(){
for(var i=0;i<2;i++){
    hello[i].style.left = '50%';
    hello[i].style.top = '50%';
    hello[i].style.transform = "translate(-50%,-50%)";
  }
  document.removeEventListener('onmousemove')
    
}


document.onmouseenter = function(){
    setTimeout(function(){
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    
    for(var i=0;i<2;i++){
        hello[i].style.left = x;
        hello[i].style.top = y;
        hello[i].style.transform = "translate(-"+x+",-"+y+")";
    }
}
  },1000)
    
}