Axure教程：商品详情页制品图效果展示
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">文案</span><span style="color: black;">重点</span>对商品详情页<span style="color: black;">制品</span>图的展示原型进行了简要的说明，<span style="color: black;">期盼</span><span style="color: black;">能够</span>给<span style="color: black;">大众</span>带来些收获。</p><img src="https://p3-sign.toutiaoimg.com/19950001b82c97c47c72~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=xkRZgiE1%2B6PLWBdG8q%2BQDql9Kgs%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">背景介绍</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">电商平台商品详情页大同小异，有一个模块是肯定少不了的，<span style="color: black;">便是</span><span style="color: black;">制品</span>图展示区域，下面<span style="color: black;">重点</span>就展示图区的<span style="color: black;">有些</span>小效果做<span style="color: black;">有些</span>说明。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">准备工作</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网上找<span style="color: black;">有些</span><span style="color: black;">照片</span>素材，要分两批，一批大图，一批小图（不想自己找的，文末有素材附件）</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">功能实现</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">1、</strong><span style="color: black;">首要</span>拖入一个动态面板，命名为d，<span style="color: black;">体积</span>为387×121，将小图<span style="color: black;">根据</span><span style="color: black;">次序</span><span style="color: black;">摆列</span>好，<span style="color: black;">按照</span>美观度自主调节<span style="color: black;">照片</span>间距如下图：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">2、</strong>点进去d的状态1，将小图<span style="color: black;">所有</span>选中转换为动态面板，命名为d1，d1展示<span style="color: black;">所有</span>的5张小图，而d则展示4张小图，如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b82d12b27a50~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=kCCxGv%2FXvcI%2FFxQWxWHoeHSla8U%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3、</strong>在d1中拖入一个矩形框，外框设置为红色，颜色设为透明，如下图：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4、</strong>将大图<span style="color: black;">安置</span>在小图的上方，并转换为动态面板，命名为d_big，如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b82ea37d3cef~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=aPxuv07SVfzcj2uPhsFkCPoniUg%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">5、</strong>给五张小图分别命名：small_1、small_2、small_3、small_4、small_5，设置鼠标移入移出事件，当鼠标移入时，设置红色外框（命名为wk_red），移动到小图的坐标位置（x,y），<span style="color: black;">这儿</span>用到函数[]、[]，其中LVAR1<span style="color: black;">表率</span>的是元件小图，<span style="color: black;">同期</span>设置大图<span style="color: black;">按照</span>小图进行状态切换，效果如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b82fa60b49ee~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=OkKik%2Blkvvi5Ys5daT4O%2BiMCK0A%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">6、</strong>在小图两边画上<span style="color: black;">上下</span>箭头，点击左箭头，让d1向左移动<span style="color: black;">必定</span>距离，点击右箭头，让d1向右移动<span style="color: black;">必定</span>距离，向左距离为负值，向右移动为正值。<span style="color: black;">详细</span>参考下图：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">7、</strong><span style="color: black;">最后</span>效果如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b83027fbf27e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=bOVOWJSDxoLfu23XZt49dPRj2fI%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">能力<span style="color: black;">提高</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>再实现了<span style="color: black;">这般</span>的效果后，还有<span style="color: black;">另一</span>的一个效果，<span style="color: black;">亦</span>用的比较多，如下图所示：</p><img src="https://p3-sign.toutiaoimg.com/19950001b832a3e9e816~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=P1I2J5FNbB%2BR8058KEgv%2BbvJHyI%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">办法</span>说明</strong></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以下实现这个效果的<span style="color: black;">办法</span>，并不是最简便的<span style="color: black;">办法</span>，<span style="color: black;">亦</span>并不是最完美的<span style="color: black;">办法</span>，只是最<span style="color: black;">基本</span>的<span style="color: black;">办法</span>，这个实现<span style="color: black;">办法</span>简单易懂，还有实现起来<span style="color: black;">繁杂</span>，<span style="color: black;">最后</span>效果更逼真，更方便的<span style="color: black;">办法</span>，<span style="color: black;">这儿</span><span style="color: black;">再也不</span>做<span style="color: black;">尤其</span>说明，<span style="color: black;">大众</span>下去自己<span style="color: black;">科研</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ps:原型只是工作的一种手段，并不<span style="color: black;">必须</span>在这上面花费太多精力，<span style="color: black;">不外</span>，多<span style="color: black;">认识</span>一点知识总是好的。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">实现<span style="color: black;">过程</span></strong></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">1、</strong>先拖入一个<span style="color: black;">体积</span>为200×200的矩形框，背景色设置为#666666，透明度为50%，命名为follow_1，<span style="color: black;">而后</span>按住ctrl键，复制出三个，分别命名为follow_2,follow_3,follow_4，如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b833c177b3d0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=tJG4Y5k3cGO42beAdMHG0DkA5aE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">2、</strong>在画布空白区域，<span style="color: black;">根据</span>下图所示，拖入文本框，四个文本框，分别命名为：follow_1_x,y，follow_2_x,y，follow_3_x,y，follow_4_x,y。</p><img src="https://p3-sign.toutiaoimg.com/19950001b83486dfd7d3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=MrulZnukx5v%2BKBGJYlAH%2Ft%2BQ6vc%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3、</strong>设置页面载入时事件，获取follow_1~4的坐标值。</p><img src="https://p3-sign.toutiaoimg.com/19950001b835d54f0780~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=%2FddnKZaqd3SzkTdJRzgZ%2B1qnSns%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4、</strong>拖入动态面板，命名为j_big，将四张切割图<span style="color: black;">根据</span><span style="color: black;">次序</span>，放入动态面板中，如下图。</p><img src="https://p3-sign.toutiaoimg.com/19950001b836504f228d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=I3uDnjy7Clg3DjgcVpi8sLWIf5c%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">5、</strong>设置鼠标的悬停事件，当鼠标<span style="color: black;">处在</span><span style="color: black;">区别</span>区域时，<span style="color: black;">表示</span><span style="color: black;">区别</span>标记的follow。<span style="color: black;">详细</span>设置如下图：</p><img src="https://p3-sign.toutiaoimg.com/19950001b8373412416b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=93KLxtl13XKw9lD9eYhxwMMEMjE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">6、</strong>设置<span style="color: black;">区别</span>follow<span style="color: black;">表示</span>时，对应右边<span style="color: black;">照片</span><span style="color: black;">亦</span>跟随变换</p><img src="https://p3-sign.toutiaoimg.com/19950001b8383d86eaa9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651631&x-signature=7iVvMOs3K9Vmz589hopHZcDvQmQ%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">rp文件：</strong>rp文件</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由 @神奈川00 原创发布于人人都是<span style="color: black;">制品</span>经理。未经许可，禁止转载。</p>
页:
[1]