gpt4 book ai didi

javascript - 如何使 JavaScript 中的鼠标悬停功能占用更少的资源?

转载 作者:行者123 更新时间:2023-11-30 18:20:39 25 4
gpt4 key购买 nike

如何让 JavaScript 中的鼠标悬停功能占用更少的资源?我使用了一种方法,其中一个函数激活另一个函数(鼠标悬停),而这个函数激活第一个函数(鼠标移出)。我使用了 Kinetic.js,但我也希望有另一个库的解决方案。

我想稍后将它与鼠标悬停功能的其他选项一起使用。

我的代码:

<head> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"

function changeCircle (circleLayer, nx, ny, nradius, nfill, nstroke, nstrokeWidth) {
var stage = new Kinetic.Stage("container", 578, 200);
var context = circleLayer.getContext();
circleLayer.clear();
var ncircle = new Kinetic.Circle({
x: nx ,
y: ny ,
radius: nradius ,
fill: nfill ,
stroke: nstroke ,
strokeWidth: nstrokeWidth
});

circleLayer.add(ncircle);
stage.add(circleLayer);

ncircle.on("mouseout", function(){
drawCircle (nx, ny, nradius, scolor, nstroke, nstrokeWidth);
});
}

function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage("container", 578, 200);
var circleLayer = new Kinetic.Layer();
circleLayer.clear();

//circle
var scircle = new Kinetic.Circle({
x: sx ,
y: sy ,
radius: sradius ,
fill: sfill ,
stroke: sstroke ,
strokeWidth: sstrokeWidth
});

scircle.on("mouseover", function() {
changeCircle(circleLayer, sx, sy, sradius, "red", sstroke, sstrokeWidth);
});

circleLayer.add(scircle);
stage.add(circleLayer);
}

window.onload = function(){
drawCircle (200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>

最佳答案

在 mouseover 和 mouseout 之前,清除 div(container) 标签。

    <head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"
function changeCircle(circleLayer, nx, ny, nradius, nfill, nstroke, nstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var context = circleLayer.getContext();
circleLayer.clear();
var ncircle = new Kinetic.Circle({
x: nx,
y: ny,
radius: nradius,
fill: nfill,
stroke: nstroke,
strokeWidth: nstrokeWidth
});
circleLayer.add(ncircle);
stage.add(circleLayer);
ncircle.on("mouseout", function() {
document.getElementById("container").innerHTML = "";
drawCircle(nx, ny, nradius, scolor, nstroke, nstrokeWidth);
});
}
function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: sfill,
stroke: sstroke,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover", function() {
document.getElementById("container").innerHTML = "";
changeCircle(circleLayer, sx, sy, sradius, "red", sstroke, sstrokeWidth);
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>

或者在相同的函数中使用 mouseout 事件

<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"

function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: sfill,
stroke: sstroke,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover", function() {
scircle.attrs.fill = "red";
circleLayer.draw();
});
scircle.on("mouseout", function() {
scircle.attrs.fill = "green";
circleLayer.draw();
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>

关于javascript - 如何使 JavaScript 中的鼠标悬停功能占用更少的资源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12108787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com