Question

大家好我是html5的新手。我编写了一个代码，其中我使用了easelJS库。我已经加载了一个图像，我想尝试不同的鼠标事件。我在画布上加载了一个图像，它是工作正常，但我希望我的图像放大，当我把鼠标放在它上面。但我不知道为什么它不工作。可以任何人请指导我，我错过了这里是我的代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="EaselJS/lib/easel.js"></script>
<script>
var canvas;
var stage;
var img , pic;
var update =true;
function init() {

    canvas = document.getElementById("canvas");
    stage = new Stage(canvas);
        img = new Image();
    img.src = "picture.png";
    img.onload = setimage;

}
function setimage(event){
  pic = new Bitmap(img);
  stage.addChild(router);   
  pic.x = canvas.width - 90;
     (function(target) {
                pic.onMouseOver = function() {
                target.scaleX = target.scaleY = target.scale*1.2;
                update = true;
                }
     })(pic); 
   Ticker.addListener(window);

}
function tick() {
    if (update) {
        update = false; // only update once
        stage.update();
    }
}

</script>
<style>
 #div1, #div2
{
    float:left;
    width:100;
    height:150;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;}

</style>
</head>

<body onLoad="init()">
<div id="div1">
<canvas id="canvas" width="100" height="150" ></canvas> 
</div>
<body>
</html>

谢谢

Answer 1

首先，您必须设置舞台以接受鼠标事件：

stage.enableMouseOver();

Answer 2

您也可以使用CSS3 scale transform代替JavaScript来实现此目的。当然，它只适用于支持此功能的浏览器，这可能不是您想要的。

如何在鼠标功能上增加图像大小

2 个答案: