2012-03-29 93 views
0

你好我每个人都是新来的html5.I已经写了一个代码,我已经在使用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> 

感谢

+1

首先请的来看看你的标记..你已经有了两个'body'tags在您的标记 – 2012-03-29 05:57:51

+1

在'stage.addChild(router)'这一行''函数的参数'router'既没有声明也没有在程序中定义.. – 2012-03-29 06:06:31

回答

0

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

1

首先你必须设置在台上接受鼠标事件:

stage.enableMouseOver();