京东官网翻转页面原型的实际操作步骤

无需加好友免费技术支持

创作者分享制做京东官网翻转页面原型的实际操作步骤，希望大家可以从这当中得到启发。

先弄京东官网原照(还可以检索京东官网查询)

先分析一下这一页面，几张图的翻转，中心点偏下一个下拉列表，由好多个椭圆和一个圆角构成。

点一下图片链接到对应的主题活动，点一下图片链接到对应的主题活动网页页面。

先把图片导进工作区域，鼠标点击选择转换成建立动态面板。

之后在页板上，即右下方的板上会有一个动态面板栏，鼠标移动点一下的时候会发生减号，即减号情况。

双击鼠标建立2个新状态，在每一个状况下添加一张图片，我用三个情况为例子。

点击动态面板在控制面板状况下寻找互动分两栏里的加载事情，双击鼠标添加。

将跳出一个设置对话框，在正本栏内寻找设置控制面板情况

点一下明确按F浏览会出现简单滚动效果。

点一下index（或是home）右下方页面主要目的是没有在动态面板上创建椭圆。

之后在正本库文件寻找椭圆形，移到工作栏中，调节适度尺寸，拷贝3个调整至适度的部位，并把圆形边框设置为无框。

接着是关键。先讲基本原理。

大家应该做的是把转换图象顺序与三个椭圆的转换相匹配。与京东官方网站对比，大家可以看到转换到对应的图片，对应的按键将发红。

先弄按键发红事情，点一下第一个按键鼠标右键选择互动式。

选择弹出来互动设置里的选择栏，选择鲜红色启用填充色

其他几个椭圆的设置与第一个一致。

此外，让第一张图与椭圆1关联，即转换到第一张图，与此同时选择椭圆1发红。

选择动态面板，在特性中寻找情况转变事情，双击鼠标添加，选择设置里的编写标准state1

点一下明确。

之后在元器件姿势栏内寻找选择姿势双击鼠标添加，主要参数设置如下所示：

椭圆1设置“true这就意味着当转换到图片1时，椭圆1被选定，己经设置了一个红色椭圆，所以在这里的椭圆1变为鲜红色。同样的设置，自然case2把state换为state椭圆1和3数值相当于false椭圆2数值true。椭圆3亦是如此，我不会图中了。

最艰难的那一部分已经结束鼠标移入图片时终止翻转动作。

或是点一下动态面板，在属性栏中寻找鼠标移动事情，双击鼠标添加弹出来设置框中的设置控制面板情况，选择停止循环。

然后就是电脑鼠标移除时图片再次翻转事件。双击鼠标添加电脑鼠标移除时事情（添加到动态面板上），主要参数与以往设置的翻转主要参数一致。

假如你按F在浏览下，大家可以看到己经很接近制成品了。

下面，当鼠标移入椭圆1时，将图片转换到图片1。

此事情应添加到椭圆1上，点击椭圆1，在特性中寻找鼠标移动事情双击鼠标添加，在弹出来设置对话框中选择设置控制面板情况state1”。

由于鼠标移动时界面终止翻转，但只必须选择state1(即图片1)就可以。同一椭圆2，椭圆3相匹配添加事情，选择情况为state2，state3就可以。

双击鼠标图片1在特性中寻找鼠标点击时事情，双击鼠标添加，选择连接栏寻找现阶段对话框点击添加，设置如下所示：

将您需要转过的网站输入到网页链接中，图片2、3实际操作与1一致，但网址不一样。

最终，在三个椭圆下添加一个圆角做为背景颜色，以调节清晰度和圆弧。就我个人而言，我觉得添加这一圆角感觉比较光洁。以下属于制成品地形图。我不太喜欢第一次轻轻地喷撒实例教程。

附：源代码百度云链接：

登陆密码：o2o4

文中由 @红匏白脸 每一个人都是产品运营。未经同意许可，禁止转载。