好资源导航 » 文章资讯 » 将图像缩放鼠标悬停在HTM5

将图像缩放鼠标悬停在HTM5

2024-05-02 17:47:04 383

要在鼠标悬停时缩放图像，请使用VanillaJavaScript库。

鼠标移动时，如下设置：

function move(e) {
   var pos = getMousePos(myCanvas, e);
   context.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

对于画布：

//add event listener we need
myCanvas.addEventListener('mouseout', display, false);
myCanvas.addEventListener('mousemove', move, false);

function display() {
   context.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}

将图像缩放鼠标悬停在HTM5 上