как увеличить размер изображения при наведении мыши на функцию - PullRequest
Новая
       5

как увеличить размер изображения при наведении мыши на функцию

0 голосов
/ 29 марта 2012

Привет всем, я новичок в 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>

спасибо

Ответы [ 2 ]

1 голос
/ 10 мая 2012

Прежде всего вам необходимо настроить сцену для приема событий мыши: 

stage.enableMouseOver();
0 голосов
/ 29 марта 2012

Вы также можете использовать масштабное преобразование CSS3 вместо JavaScript для достижения этой цели. Конечно, это будет работать только в браузерах, которые поддерживают эту функцию, что может не соответствовать вашим ожиданиям.

...