如何用摹客RP制作鼠标hover后图片列表的放大效果
图片列表是产品经理常用的展示方式，今天就和大家分享一下，在摹客RP里如何制作一个鼠标hover到图片上能够查看大图的图片列表。
先看看效果：
鼠标hover到图片上时，图片有一个放大的效果，鼠标离开图片后，图片恢复原来的尺寸。
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=ZGNkNGE2NjFhYmU5ODE1OTAzODExYjA0OWYzNmVhNTVfWjA4UW80a21IQWtIVmR1NmZacllYOGkyVXVuUkVGRXdfVG9rZW46Ym94Y25XRDZyVExSMTlON0VWY1lzQmFnaXJnXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
上图是知乎文章详情页面下的“推荐阅读”，用的就是这种效果，下面我就以这个来说说怎么做的交互。
01 准备工作
需要准备的组件：图片组件
本地图片：4张
02交互制作
1）设置好尺寸，选中图片，拖动图片组件右上角的链接点给自己做一个交互。
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=NTNhMWU0NDBkMGU1NWI5Yjk0YTBhNDBhMTdlOGJkMTdfUmdqaWtYTjRCbEx5djU5YmJ0RDVnSzU2bjNLY0VYcUpfVG9rZW46Ym94Y25TQmZNejhZTDJEZURzSjQzdHlFaTliXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=MTY3NWQxODUyYjZlY2VmYTI2YjczYmFkOTBlYTRmYTRfTUNDc1Q5dTRXb1ZBeUpkdTM2WTRMUTlWckEzbjZTYXZfVG9rZW46Ym94Y25TY2N6R3Q1VmFCSXhGU0M4RUhVZ0tnXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
2）设置交互
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=NzA1Yjc2ZWUzZGFjNjQ4ZjE4NmQ0ZDMzZjIxNTM2MGFfcFU0MzBZN1V3S3NNYVJadWE2T2thTFVHN0NuN0t1ZFhfVG9rZW46Ym94Y25BTkl0VVFsNWl5bTdzMnkwd0ZzZFVkXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
[*]触发：鼠标进入
[*]目标：自己
[*]命令：调整尺寸（扩展点选择中间的点）
[*]宽度和高度：设置为所需要的尺寸
[*]缓动：线性(按需设置）
[*]时长：200 ms(按需设置）
[*]延时：0 ms(按需设置）
鼠标移动的交互设置完成。
按上面的步骤图片和自己再做一个鼠标离开的交互：
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=MDEwOTQxNzM4Zjc4YWNhYTdkNGI0YjAzYTkxMjljNTNfNk43dk9YSXIyTlgwamxQRmVIbDViYWhON0p6YTV0VW9fVG9rZW46Ym94Y25rNVJYRGFFUzVEVkpYbWZKeXV4b2doXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
[*]触发：鼠标离开
[*]目标：自己
[*]命令：调整尺寸（扩展点选择中间的点）
[*]宽度和高度：设置为原尺寸或所需尺寸
[*]缓动：线性(按需设置）
[*]时长：200 ms(按需设置）
[*]延时：0 ms(按需设置）
整个交互完成。
要达到知乎“推荐阅读”的效果，你只需要把这个图片组件复制三份，分别导入图片就可以了。
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=ZDIyNWUxOTRmOTFkZjhjZDRlZTljOTNmMzExYjQ2NjBfNTJ0VGdON1dpbmFvN2cwUEV2RXBWZVI5bFpINnlQNnhfVG9rZW46Ym94Y25IMUY3SUxoa1JIN2YyRm5EQ0Zxa01iXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
实际的效果可以参考知乎的“推荐阅读”板块，也可以参考UI中国的首页图片列表效果。
觉得是不是很简单呢。
03）举一反三
点击任一图片，再弹出图片。
交互：图片和辅助画板做一个弹出的交互，再做一个点击图片隐藏的交互，如下图。
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=MjE3OTYyZjlmNTUzYjBiMGNiZTExM2ZhMDc4MDYxNjlfbmV2UmlES0dHZEZ5UmNvZ2tQU3JzVjFST1oxc2ZHUjVfVG9rZW46Ym94Y244VmdaeU0zOFJvUENFR2t3UWYyUGtmXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=MDIxNjA0ZDkxZjBmZmUzYTFlZjlkZDA0MTdiYmUxNDhfVGtITjU5NFNvN2NUOXRSTnY4TzI4V1FQYVV3MUFpVFZfVG9rZW46Ym94Y244UjVEQ253ZjVwNXJFVGVIcmVTWGdlXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
https://mockplus.feishu.cn/space/api/box/stream/download/asynccode/?code=YTNjMzFkZmU4Y2NiZTgxYTk0M2YxY2E3ZjgxOTg3YWFfUFFLZHRNcjRMR053Qk9DSWR0ZmRlVVlNbDAyUndqR0tfVG9rZW46Ym94Y25DTHZyUUVPMEgwY0hmRFJPMnhreEJoXzE2NTEwMjY1Njk6MTY1MTAzMDE2OV9WNA
你学会了吗？需要什么交互也可以给我留言。
更多交互教程，待续中。。。
页:
[1]