2016-05-30 115 views
-1

我試圖實現添加交互式鼠標指針,類似於this page上的那個。我已經檢查了相當一段時間的源代碼,一直沒有弄清楚。動畫/交互式鼠標指針

需要什麼代碼才能以與此頁面相同的方式爲鼠標指針設置動畫效果?

+0

這會刪除/ Redrow的相同的星座是不相關的鼠標指針,但與事件偵聽器帆布一些''元素,使用JS計算鼠標位置 - 並繪製線條和點。 –

+0

請務必閱讀:[問問]並始終確保創建[mcve] –

+0

我不知道從何處開始構建代碼,因此是問題所在。 「帆布」的簡單建議本身就是一大幫助 –

回答

-1

縮小的代碼是在這裏 - http://2f-design.fr/themes/starry/wp-content/themes/starry/js/header-pointer.js?ver=1.0

基本上它只是一個在mousemove事件遍地

// Event handling 
function addListeners() { 
    if(!('ontouchstart' in window)) { 
     window.addEventListener('mousemove', mouseMove); 
    } 
    window.addEventListener('scroll', scrollCheck); 
    window.addEventListener('resize', resize); 
} 

function mouseMove(e) { 
    var posx = posy = 0; 
    if (e.pageX || e.pageY) { 
     posx = e.pageX; 
     posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
     posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    target.x = posx; 
    target.y = posy; 
} 
+0

感謝Vittore,正是我之後 –