Question

如何在JavaScript中创建鼠标悬停功能，减少资源消耗？我使用了一种方法，其中一个函数激活另一个函数（鼠标悬停），此函数激活第一个函数（mouseout）。我使用了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>

Answer 1

在鼠标悬停和mouseout之前，清除div（容器）标记。

    <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中使用鼠标悬停功能的资源更少？

1 个答案: