如何用JavaScript编写电商商品图片放大镜功能？

本文共计1290个文字，预计阅读时间需要6分钟。

原文示例：本文字例为大家庭分享了javascript实现电商放大镜效果的完整代码，供大家参考，具体内容如下：学习内容：

1.event.pageX 属性返回鼠标指针的位置，相对于文档的左边界。

2.clientX 属性返回事件触发时鼠标的位置，相对于浏览器窗口的左边界。

本文实例为大家分享了javascript实现电商放大镜效果的具体代码，供大家参考，具体内容如下

学习内容：

1、event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。
2、clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。
3、onmouseenter鼠标移入
4、onmouseleave鼠标移出

案例完整代码。html+css3+javascript

案例需求:鼠标点击左边图片时（鼠标呈十字架），遮罩层显示，右边盒子显示。且鼠标移动中心在遮罩层中心，右边大盒子显示鼠标点到的地方，以800：350比例显示。遮罩层只能规定左边盒子范围内移动而且不给超出。