如何用JavaScript面向对象实现长尾词放大镜功能？

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

原文示例：本文实例为分享了使用JavaScript面向对象实现放大镜的具体代码，供大家参考。具体内容如下：效果图+实现原理分析+如图所示+鼠标箭头的移动事件时，根据事件对象的+clientX+和+clientY+属性

简化版：本文以实例展示了用JavaScript面向对象实现放大镜的代码，内容包含效果图、实现原理、代码分析和鼠标移动事件处理。

本文实例为大家分享了JavaScript面向对象实现放大镜的具体代码，供大家参考，具体内容如下

效果图

实现原理分析

如图所示

触发鼠标的移动事件时，根据事件对象的 clientX 和 clientY 属性得到实时的坐标点 x 和 y
值 ，减去 small_box 的 offsetLeft 值 和 cutting_box 的宽度的一半 ，可以得到 cutting_box 的偏移量 left 值，top值同理。当 cutting_box 到达右侧和下侧时，left 和 top 取得最大值。用 实时变化的left和top值 比上 各自的最大值，可得到一个比例，再根据这个比例，算出右侧 big_img 元素的 left 和 top。具体求法是：先求出 big_img 放大后的宽高，由这个宽高求得big_img的 left和top 最大值。