2012-03-29 54 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();