js设置图片放大缩小拖动

效果:

 思路: 在外层box进行相对定位relative,img设置绝对定位absolute;通过监听滚轮事件(wheel),设置样式缩放中心点(transformOrigin)和缩放转换(transform);获取到图片大小和位置,设置对应图片宽度高度和top、left偏移;鼠标按下事件(mousedown)和鼠标移动事件(onmousemove),得出图片移动偏移量。

详细代码如下:




  
  图片拖拽与缩放
  



  

你可能感兴趣的:(javascript,前端,html)