这篇文章主要为大家详细介绍了原生js实现放大镜效果,制作一个类似于淘宝的放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果。
先说一下这个效果需要用到的一些基础知识:
css相对定位:position:absolute;
鼠标移入移出以及移动事件:onmouseover、onmouseout、onmousemove,记住这些事件一般不会单个出现
获取鼠标点击坐标:X轴:clientX,Y轴:clientY
当前元素相对于父元素的左位移:offsetLeft
当前元素相对于父元素的上位移:offsetTop
当前元素的实际高、宽度(不包括滚动条):offsetWidth、offsetHeight
球当前元素的最小值,最大值:Math.min()、Math.max();
话不多说直接上代码吧!
放大镜效果
以上就是原生js实现淘宝放大镜效果的详细内容,更多请关注0133技术站其它相关文章!