Axure之实现页面的左右切换简单实例

开心一笑

【人生通用解决问题基本法,你值得拥有!
难过?在床上躺会.
累了?在床上躺会.
病了?在床上躺会.
无聊?在床上躺会.
明天要交作业了?先在床上躺会.】

视频教程

大家好,我录制的视频《Java之优雅编程之道》已经在CSDN学院发布了,有兴趣的同学可以购买观看,相信大家一定会收获到很多知识的。谢谢大家的支持……

视频地址:http://edu.csdn.net/lecturer/994

提出问题

Axure之如何实现页面的左右切换???

解决问题

1.新建一个项目

2.在 【index】页面中,拖入一个【动态面板】,设置面板的宽度和高度,双击【动态面板】,添加3个 state页面。如下图

Axure之实现页面的左右切换简单实例_第1张图片

3. 往第一个【state】中拖入1一个大的【矩形】和2个小的【矩形】,同时拖入一个【一级标题】,写上数字【1】

Axure之实现页面的左右切换简单实例_第2张图片

4.对于【state2】和【state3】,执行步骤3的操作,只是动态米面板中的数字分别是【2】和【3】的区别。

Axure之实现页面的左右切换简单实例_第3张图片

5.回到【state1】页面,对左边小矩形添加【设置面板状态】动作,同时选择状态为【state3】,进入动画为【向左滑动】,同时勾选【如果隐藏则显示面板】

Axure之实现页面的左右切换简单实例_第4张图片

6.同样是【state1】页面,对右边小矩形添加【设置面板状态】动作,同时选择状态为【state2】,进入动画为【向右滑动】,同时勾选【如果隐藏则显示面板】,图片如【步骤五】一样。

这里要解释下,【state1】向左切换是【state3】,【state1】向右切换是【state2】

7.保存,点击【预览】,在浏览器查看预览效果。

8.对于【state2】和【state3】,重复【步骤5】和【步骤6】,只是选择状态要变,对于【state2】向左切换是【state1】,向右切换是【state3】;对于【state3】向左切换是【state2】,向右切换是【state1】

**9.大功告成,浏览器预览效果

10.爱你~~~

读书感悟

来自阿兰·巴迪欧《爱的多重奏》

  • 爱的可贵经验就在于,从某一瞬间的偶然出发,去尝试一种永恒。
  • 相遇仅仅解除了最初的障碍,最初的分歧,最初的敌人;若将爱理解为相遇,是对爱的扭曲。一种真正的爱,是一种持之以恒的胜利,不断地跨越空间、时间、世界所造成的障碍。爱是坚持到底的冒险。”
  • 我爱你, 就意味着:在这个世界上,你成为我生命的源泉。在这个源泉的泉 水中,我看到了我们的欢乐,首先是你的欢乐。

经典故事

【西施有心痛病,总是皱着眉走路。村子里的人见到西施楚楚可怜的样子,都觉得西施更加美丽了,对她的美貌赞不绝口。村子里还有一个女子名叫东施,模样长得非常丑陋,她看见后,认为西施那种样子非常好看,于是就模仿着西施,也捂着心口,皱眉蹙(cù)额地走在村庄里。可是,事与愿违,人们见了她那种怪模样都避得远远的。后来人们用“东施效颦” 嘲讽不顾本身条件而一味模仿,以致效果很坏的人。

大神文章

其他

如果有带给你一丝丝小快乐,就让快乐继续传递下去,欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持!

你可能感兴趣的:(一步一步学Axure)