请教一个JS 鼠标放在图片上 图片放大 的问题

JavaScript015

请教一个JS 鼠标放在图片上 图片放大 的问题,第1张

从中间放大要设置为absolute定位才行,要不static只能是左上角

或者可以使用css3的transform:scale(2)transform-origin:center

获取当前所在图片坐标,然后等比例放大图片,等比例获取坐标值,将图片定位在显示窗口位置,可以了。

这个要求把css写精细一点

我的想法是

为div和img添加onmouseover事件

监听到这个事件时再为这个事件的响应元素添加onmousewheel事件

在onmouseout事件中将放大缩小的响应移除

这里要求img所在层要高于div,即让img响应onmouseover事件但不让下层的div响应

单个图片最好使用绝对定位,以免放大缩小造成整个图片集合的排版错乱

设置图片的父元素为相对定位;

设置图片为绝对定位;

假设图片宽为w,高为h,放大后的宽为2w,高为2h,则计算其位置如下:

left:-(2w-w)/2,

top:-(2h-h)/2