jQuery "slime menu" - 像素完美舍入
jQuery "slime menu" - pixel perfect rounding
我已经成功编写了我的 jQuery 粘液菜单,现在它运行起来很漂亮。我唯一的问题是我分别移动了箭头和粘液的结束圆圈(图标),所以如果你将光标移动到离起点太远的位置,它就不会精确地连接到粘液。应该是四舍五入的问题。这是我正在谈论的图像:
这是我正在研究的 fiddle:
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));
}
一些 jQuery 方法,如高度四舍五入小数。你可以试试这个:
$(".arrow")[0].getBoundingClientRect().height
更多信息:https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect
您看到此 'not precisely connected' 的原因是旋转以 360 步(圆的 360 度)进行。当你靠近中心时,效果可以忽略不计,但你越远离中心(增加圆周长!)度数之间的可见差距增加。
也许用 svg 试试这个?
实际上你可以使用浮点数度数..所以不要四舍五入度数!
https://jsfiddle.net/41Lcj653/5/
// without math.round
var dir = -(Math.atan2(mPos.x, mPos.y)) / (Math.PI/180);
我已经成功编写了我的 jQuery 粘液菜单,现在它运行起来很漂亮。我唯一的问题是我分别移动了箭头和粘液的结束圆圈(图标),所以如果你将光标移动到离起点太远的位置,它就不会精确地连接到粘液。应该是四舍五入的问题。这是我正在谈论的图像:
这是我正在研究的 fiddle: 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));
}
一些 jQuery 方法,如高度四舍五入小数。你可以试试这个:
$(".arrow")[0].getBoundingClientRect().height
更多信息:https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect
您看到此 'not precisely connected' 的原因是旋转以 360 步(圆的 360 度)进行。当你靠近中心时,效果可以忽略不计,但你越远离中心(增加圆周长!)度数之间的可见差距增加。 也许用 svg 试试这个?
实际上你可以使用浮点数度数..所以不要四舍五入度数!
https://jsfiddle.net/41Lcj653/5/
// without math.round
var dir = -(Math.atan2(mPos.x, mPos.y)) / (Math.PI/180);