In this article, we continue to complete the fixed point zoom function of the image, the same compatibility is currently only considering Google, other types and versions of their own expansion

1. Fixed-point scaling

HTML part

<div id="app"> <img id="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18 % 2 f8%2f125b6560a6ag214.jpg&refer=http%3a%2f%2f1812.img.pp.sohu.com.cn&app=2002&size=f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? sec=1625993298&t=9de0d6fb925f43ebe1f700162ee8d8c5" alt=""> </div>Copy the code

The CSS part

Js part

<script> // Const el = document.getelementById ('img'); El. Onmousewheel = function (e) {/ * use zoom attributes relative starting point -- -- -- -- -- zoom * / const OE = e | | event; // Get const offsetWidth = el.offsetWidth; const offsetHeight = el.offsetHeight; Const left = parseFloat(el.offsetLeft); const top = parseFloat(el.offsetTop); Const disX = oe.clientx-el.offsetleft; // Const disX = oe.clientx-el.offsetleft; const disY = OE.clientY - el.offsetTop; //wheelDelta is positive (120.240...) Is the mouse up; If (e.heeldelta > 0) {el.style.width = offsetWidth + offsetWidth * 0.2 + 'px'; El.style. height = offsetHeight + offsetHeight * 0.2 + 'px'; El.style. left = left-disx * 0.2 + 'px'; El.style. Top = top-disy * 0.2 + 'px'; el.style. Top = top-disy * 0.2 + 'px'; } else {el.style.width = offsetWidth - offsetWidth * 0.2 + 'px'; El.style. Height = offsetHeight - offsetHeight * 0.2 + 'px'; El.style. left = left + disX * 0.2 + 'px'; El.style. Top = top + disY * 0.2 + 'px'; }}; </script>Copy the code

So a simple image point zoom function is realized

2, rotation,

The rotateDeg function is pretty simple it’s just one line of code, so I won’t write it in detail

el.style.transform = 'rotate(${rotateDeg}deg)'