相关链接
1. 了解 放大效果 的实现原理
一、成品效果
一、放大效果
1.1 鼠标在商品图片上移动,右侧显示对应区域放大镜效果
1.2 限制放大器的移动范围,不可超出商品图片
二、商品切换
2.1 鼠标点击商品小图,大图切换至相应商品
2.2 默认选中第一个商品
2.3 选中的商品会显示对应效果(边框+变灰)
二、素材准备
准备若干商品图片,处理成大小相等的正方形。再去iconfont 下载一个放大镜图片(色号#7F7F7F、PNG格式)。
图片准备三份:小图(50x50),中图(300x300),大图(900x900)
三、制作方法
3.1 结构
页面大致分为4部分:【小图区域】、【中图区域】、【大图区域】、【背景】
【小图区域】:分为热区、边框、悬停、图片
1. 热区 点击热区,设置边框和悬停效果的选中状态(注意至于同一选项组内)
2. 边框 选中后体现蓝色边框效果。同时切换中图、大图的动态面板到对应页面(注意至于同一选项组内)
3. 悬停 默认透明色,位于图片上层。选中通过改变背景色,体现出置灰的效果
4. 图片 不需要任何交互,仅作为图片展示。
【中图区域】:分为热区、放大镜、其他、图片
1. 热区
x:[[Cursor.x - Target.height /2]]
y:[[Cursor.y - Target.height /2]]
其中:
Cursor.x:表示获取鼠标在坐标系中的x轴坐标值。
Cursor.y:表示获取鼠标在坐标系中的y轴坐标值。
Tartget.height:表示目标元件的高度值,由于是正方形,其宽高都一样;
注意:设置边界范围,放大镜不能超出中图区域范围。具体数值自己多测试就明白了。
计算放大镜移动坐标时,进行了一个偏移校正的操作。
偏移校正:指让鼠标处于放大镜中心位置。
为了更直观的说明什么是偏移矫正,现假设。x轴=[[Cursor.x]],y轴=[[Cursor.y]],则会出现以下情况:
2. 放大镜 移动时,右侧大图(所有分页一起)都移动到相应位置
x:[[(This.x - 100) * (-3)]]
y:[[(This.y - 100) * (-3)]]
这里就是一个简单地数学计算,但解释起来比较麻烦,自己根据实际情况测试吧
>
放大原理:看似是先读取放大镜部分图片,再放大展示到右侧。其实是利用动态面板特性,右侧图片在移动。
动态面板特性: 只显示动态面板框的位置。
为了更直观的说明什么是动态面板特性,使用gif动图演示:
红框: 动态面板实际范围
蓝框: 为了演示,调大之后的动态面板范围
通过上面动图可以清晰的看出来放大效果的原理。
【大图区域】: 只有图片
1. 图片 不需要任何交互,仅作为图片展示。
需要注意,默认左侧放大镜处于中图的中央位置,所以右侧大图默认也处于中央位置。
以上所有尺寸,初次调试时建议使用整数,方便计算,调整完毕后可以尝试使用变量,再改为需求实际尺寸。
22/09/29
M