本文摘自PHP中文网，作者善始善终，侵删。
推荐：《jquery视频教程》
一、需求分析
图片的放大效果我们在软件开发中经常遇到，其相当于放大镜效果。我们在平时的网购中可以看到，我们在浏览一商品时，单击一张图片，其左侧会展示一张商品的图片，当鼠标移动到图片上时就会在右侧展示局部放大的效果
二、设计思路
1、当鼠标移入到小图的盒子时，如何显示放大镜盒子和大图盒子?
2、如何获取小图图片和大图图片的宽度和高度?
3、如何设置放置小图盒子的宽度
4、如何设置放大镜滑块和盒子的大小
5、何设置放大镜盒子移动事件
6、如何设置鼠标在放大镜盒子的中心上？
7、如何设置使放大镜盒子不可以出边框？
8、如何设置大图跟着放大镜盒子移动？
9、放大的图片的移动距离如何设置？
10、如何计算放大的图片的移动距离？
11、当鼠标移入到小图的盒子时，如何隐藏放大镜盒子和大图盒子?
三、知识储备
1. 实现图片放大镜的原理：
（1）给放大镜元素一个对应的html元素为<div>
（2）设置这个div的宽高固定为某个值；
（3）设置div的css为超出部分隐藏；
（4）div中嵌套子元素img设置宽高固定为某个值；
（5）通过数学函数计算，移动div的x轴和y轴的滚动条，正好让放大镜显示鼠标在大图的那一块区域。
2. jQuery选择器的分类
3. 常见的jQuery事件
（1）页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。常见的事件有：在元素上移动鼠标、选取单选按钮、点击元素…
（2）在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
4. 鼠标位置获取。
5. jQuery中的常见的DOM操作：查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。&oq=查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。
四、代码实现
1、在页面布局的DIV下添加三个DIV标签；
<!-- 定义一个盒子存放缩略图 -->
1 2 3 4 5 6 7 8 9 10 |
|
2、使用CSS进行美化
l 全局样式
1 2 3 4 |
|
l .small样式
1 2 3 4 5 |
|
l .small img样式
1 2 3 4 |
|
l .box样式
1 2 3 4 5 6 7 8 |
|
l .big样式
1 2 3 4 5 6 7 8 9 |
|
l .big img样式
1 2 3 |
|
3、使用jQuery实现效果
相关阅读 >>
浅谈vue项目中使用npm安装bootstrap和jQuery
更多相关阅读请进入《jQuery》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
