基于相对鼠标悬停距离更改比例？

-2

我希望缩放比例随着鼠标靠近物体而增加，当鼠标悬停在中心时，最大缩放比例应该是。我怎样才能使用Javascript来做到这一点？基于相对鼠标悬停距离更改比例？

function myFunction() { 
 
    document.getElementsByTagName("circle")[0].setAttribute("r", "100"); 
 
}

svg { 
 
    border-style: solid; 
 
    border-color: black; 
 
    background-color: white; 
 
}

<svg> 
 
<circle cx="145" cy="80" r="40" fill="red" onmouseover="myFunction()"/> 
 
</svg> 
 

 
<p> 
 
    Move mouse closer to circle to increase size 
 
</p>

https://jsfiddle.net/tahirjuba/2r5ufd8z/7/

来源

2017-07-28 tjuba

难道你们不知道我的意思吗？ – tjuba

使用'mousemove'事件，从事件对象获取鼠标坐标，计算距离，并适当设置圆的半径（或'transform =“scale（X）”'）。 –

但是直到你自己发布一个合法的尝试，我们都不会有太大的帮助。 –

你的意思是这样？

var circle = document.getElementById("circle"); 
 

 
function myFunction(evt) { 
 
    var r = Math.abs(evt.x - parseInt(evt.target.getAttribute('cx'), 10)) + Math.abs(evt.y - parseInt(evt.target.getAttribute('cy'), 10)); 
 
    r += 10; 
 
    document.getElementsByTagName("circle")[0].setAttribute("r", r); 
 
}

svg { 
 
    border-style: solid; 
 
    border-color: black; 
 
    background-color: white; 
 
}

<svg> 
 
<circle id="circle" cx="145" cy="80" r="40" fill="red" onmousemove="myFunction(evt)"/> 
 
</svg> 
 

 
<p> 
 
    Move mouse closer to circle to increase size 
 
</p>

来源

2017-07-28 13:14:37

你是否得到了鼠标的坐标，并以某种方式将它们应用于'r'？ – tjuba

@tjuba是的，它有什么'r'的功能。它采用mousevent x和svg坐标x之间的差异，并将其添加到mousevent y和svg坐标y之间的差异。然后我使用结果'r'作为圆的半径（+ 10像素，所以圆永远不会完全消失）。 –

谢谢，那么如果我想改变鼠标移动的不同属性，比如不透明度怎么办。我可以替换什么东西？ – tjuba

基于相对鼠标悬停距离更改比例？

回答

相关问题