• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:滑动鼠标页面自动切换(一)

Axure教程:滑动鼠标页面自动切换(一)

作者: @简扬 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure登录页面教程,axure页面跳转教程,axure rp页面居中,axure页面滑动效果,axure页面跳转等相关知识, @简扬 希望在学习及工作中可以帮助到您

axureyuanxigndandu

浏览网页时,尤其是互联网产品介绍方面的网站,经常可以看到,当你的鼠标停留在某些页面时,只要轻轻滚动鼠标,页面就会自动切换,相较于传统页面的手动切换可以给用户更好的体验。今天就利用Axure8.0向下滚动的交互动作实现滑动鼠标页面自动切换效果跟大家分享一下。注意Axure7.0没有向下滚动的交互动作,请大家使用8.0进行同步操作。另外,我将使用几张图片来代替页面进行示范,当然你也可以直接使用页面。

GIF2

原材料:

春夏秋冬四张动态面板以及向对应的tu1、tu2、tu3、tu4四张小图作为图示,注意四张小图合并在一起的高度要比单张动态面板的高度小。

tu1

方法/步骤

第一步:设置图示组和选中状态

同时选中图片tu1、tu2、tu3、tu4—属性—设置选项组名称输入“示意图”—选中—勾选线段颜色“黄色”—勾选线宽(选择较大宽度)—点击确定

选中tu1—属性—勾选选中(表示tu1在页面载入时默认状态为选中)

tu2

第二步:设置动态面板交互动作

依次选中动态面板chun、xia、qiu、dong,设置其向下滚动时(不同汉化版本翻译可能存在差异)的交互动作如下图。

tu3

第三步:设置图示的交互动作

依次选中图示tu1、tu2、tu3、tu4,设置其鼠标单击时的交互动作如下。也可以直接复制动态面板的向下滚动时的交互动作到图示的鼠标单击时,应用关系依次是chun—tu2;xia—tu3;qiu—tu4;dong—tu1.

tu4

第四步:调整元件大小和位置

依次选中动态面板chun、xia、qiu、dong,缩小其动态面板的高度,使其高度与四张小图合并在一起的高度一致。

依次选中动态面板chun、xia、qiu、dong,单击鼠标右键—滚动条—自动显示垂直滚动条;完成后你就可以看到动态面板右边有一条滚动条出现。

tu5

同时选中图示tu1、tu2、tu3、tu4,单击鼠标右键—顺序—置于顶层。

tu6

将动态面板xia、qiu、dong置于chun的下面,使四张动态面板完全重合地叠加在一起。同时,移动图示tu1、tu2、tu3、tu4到动态面板chun的右侧将其滚动条完全遮盖。至此,已经全部完成,如下图。

tu7

本文有一个很遗憾的地方,就是只能实现向下滚动页面自动切换,无法实现向上滚动页面自动切换。笔者尝试过使用同样的方法设置向上滚动时的交互动作,但结果是失败的,因为动态面板滚动条性质决定了在没有进行向下滚动时是无法进行向上滚动的。

笔者希望本文能对大家学习Axure起到绵薄之力,另外,若有哪位大神知道如何同时实现上下滚动页面自动切换的希望能告知一下,谢谢!

原型分享

链接:http://pan.baidu.com/s/1c2kI5AK密码:2nf3

您可能想查找下面的文章:

  • Axure教程:滑动鼠标页面自动切换(一)
  • Axure教程——页面载入进度条

相关文章

  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)
  • 2017-06-13Axure实例:制作一个通用的移动端内容滚动区
  • 2017-06-13Axure实现多级联动下拉框
  • 2017-06-14简单6步用Axure绘制相机图标(附源文件)
  • 2017-06-13Axure 7.0实例:利用Axure制作放大镜原型
  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-14如何用Axure快速制作APP交互原型
  • 2017-06-13Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
  • 2017-06-14Axure教程 | 商品列表页筛选排序练习
  • 2017-06-14轮播banner简便axure实现方式

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure7.0教程(四)中继器的使用(4)
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
    • Axure教程:多账户的登录验证
    • 轮播banner简便axure实现方式
    • Axure 8.0 拖动滑块设置数字和日期
    • 自定义微信元件库:Axure基本元件的应用(上)
    • Axure教程:验证码原型制作实例
    • Axure教程:限制输入框输入字数
    • Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
    • Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有