js实现鼠标滚轮滚动以当前鼠标焦点为中心缩放

2024-04-27 15:04:59

字体：大中小

来源：转载

供稿：网友

var posMoniCtx;//画笔var posMoniCanvas;//画布var imgX=0,imgY=0,imgScale=1,minScale=1,maxScale=8, destWidth,destHeight;var bgImg; //Chrome Firefox浏览器兼容滚轮事件 posMoniCanvas.onmousewheel=posMoniCanvas.onwheel=function(e){ e.wheelDelta=e.wheelDelta?e.wheelDelta:(e.deltaY*(-40)); if(e.wheelDelta>0&&imgScale<maxScale){//放大 imgScale*=2; imgX=imgX*2-mousePos.x; imgY=imgY*2-mousePos.y; drawAllComponent(); } if(e.wheelDelta<0&&imgScale>minScale){//缩小 imgScale*=0.5; imgX=imgX*0.5+mousePos.x*0.5; imgY=imgY*0.5+mousePos.y*0.5; drawAllComponent(); } }function drawAllComponent() {//清空面板posMoniCtx.clearRect(0,0,posMoniCanvas.width,posMoniCanvas.height);//重绘背景图 destWidth=posMoniCanvas.width*imgScale;destHeight=posMoniCanvas.height*imgScale;posMoniCtx.drawImage(bgImg,0,0,bgImg.width,bgImg.height,imgX,imgY,destWidth,destHeight);}

上一篇：中文Web Font使用

下一篇：隐藏index号大于4且不是最后一项的元素