如何在JS中添加平滑過渡到鼠標X和Y座標？

我創建了一個讓DOM元素跟隨鼠標光標的函數。 http://codepen.io/anon/pen/AXdxZO?editors=0110 如何在JS中添加平滑過渡到鼠標X和Y座標？

當您將鼠標懸停在每個項目上時，指針將跟隨您的鼠標移動。現在我正在尋找一些可以添加到此代碼中的好動畫。我在考慮緩慢過渡的一點點延遲。我已經試過使用transition: all 0.1s ease;，但是這個工作有點小問題，而且不夠「流暢」。我知道還有一些叫cubic的東西，但我不知道這是我需要的。

我認爲應該有一個函數，它會緩解鼠標的X和Y座標，添加一點平滑延遲。

的一部分委託鼠標移動是：

function mouseMove(event) { 
    var target = $(this); 
    var dot = target.find('.pointer'); 

    var height = dot.height(); 
    var width = dot.width(); 

    var offset = target.offset(); 
    var w = target.width(); 
    var h = target.height(); 
    var top = offset.top; 
    var left = offset.left; 
    console.log(left); 

    var mX = (event.clientX - left) - width/2 - 15; // 15 = padding 
    var mY = (event.clientY - top) - height/2; 

    $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)'); 

};

指針CSS：

.pointer { 
    position: absolute; 
    z-index: 1; 
    width: 25%; 
    position: relative; 
    border-radius: 50%; 
    box-shadow: 0 5px 3px rgba(0, 0, 0, .1); 
     transform: translateZ(0) scale(0); 
     -webkit-transform: translateZ(0) scale(0); 
} 

.pointer:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
}

沒有人有我需要一些建議，追索權或可能部分代碼。

另一個想法是我想動畫順利是pointer類的scale屬性。當鼠標輸入縮略圖時，它應該縮放到1，如果離開該區域，它應該縮小到零。

期待您的回覆。先謝謝你。

來源

2016-07-27 Caspert

也許這撥弄能幫忙嗎？ http://jsfiddle.net/88526/1/ –

以下是我所做的:-)

*{ -webkit-transition:1s; 
transition:1s; 
-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1); 
transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

乾杯

來源

2016-07-27 18:51:58

如何在JS中添加平滑過渡到鼠標X和Y座標？

回答

相關問題