jQuery「slime menu」 - 像素完美舍入

我已經成功編程了我的jQuery slime菜單，現在它工作得很漂亮。我唯一的問題是我分別移動粘液的箭頭和結束圓圈（圖標），所以如果你將光標移離開始點，它將不會精確地連接到粘液。這一定是一個四捨五入的問題。下面是我在談論的圖像：jQuery「slime menu」 - 像素完美舍入

enter image description here

這裏就是我工作的小提琴： http://jsfiddle.net/41Lcj653/4/

編輯（工作）：http://jsfiddle.net/41Lcj653/7/

任何人都可以有幫助這個問題？我使用CSS轉換和JS來更新每一步中的CSS規則。代碼的

JS部分：

$(function(){ 
    $(window).mousemove(function(e){ 
     moveslime(e); 
    }); 
}); 

function moveslime(e){ 
    var rad = $('.arrow').height()/2; 
    var ofs = $('.arrow').offset(); 
    var mPos = {x: e.pageX-25-rad, y: e.pageY-25-rad}; 
    var dir = Math.round(-(Math.atan2(mPos.x, mPos.y))/(Math.PI/180)); 
    $('.arrow').css('transform','rotate('+dir+'deg)'); 
    $('.arrow').css('border-width','0 25px '+pdist(0, 0, mPos.x, mPos.y)+'px 25px'); 
    $('.bubble').css('left', mPos.x+'px').css('top', mPos.y+'px'); 
} 

function pdist(x1,y1,x2,y2) { 
    return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)); 
}

來源

2015-03-31 Balázs Varga

你能解釋一下你怎麼在箭頭末端計算寬度？ – JNF 2015-03-31 10:03:32

箭頭的寬度固定爲50px（邊框寬度：{0px 25px％VARIABLE％25px;}）25x2 = 50px。下面的圓圈也有固定的50px寬度。我認爲問題在於箭頭的角度變圓了... – 2015-03-31 10:07:35

你看這個「不正是連接」的原因是，去旋轉360步（360度圓的）。當你靠近中心時，效果可以忽略不計，但是離中心越遠（增加圓周！），度數之間的可見差距就會增大。也許試試這個與svg？

實際上你可以使用浮點數一度..所以不要繞角度！

https://jsfiddle.net/41Lcj653/5/

// without math.round 
var dir = -(Math.atan2(mPos.x, mPos.y))/(Math.PI/180);

來源

2015-03-31 10:16:53 roeb

謝謝，它看起來不錯！ :) – 2015-03-31 10:27:45

一些jQuery的方法等高度舍入小數。你可以試試這個：

$(".arrow")[0].getBoundingClientRect().height

來源

2015-03-31 10:06:56

jQuery「slime menu」 - 像素完美舍入

回答

相關問題