html鼠标拖动图片放大,JavaScript实现图片的放大缩小及拖拽功能示例

本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：

实现效果如下：

实现代码：

Title

div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}

div img{position:absolute;height:100%;width:auto;cursor:move;}

var params = {

zoomVal:1,

left: 0,

top: 0,

currentX: 0,

currentY: 0,

flag: false

};

//图片缩放

function bbimg(o){

var o=o.getElementsByTagName("img")[0];

params.zoomVal+=event.wheelDelta/1200;

if (params.zoomVal >= 0.2) {

o.style.transform="scale("&#