图解Axure RP制作轮播图片、返回顶部、悬浮效果

本篇将和大家介绍Axure RP制作轮播图片、返回顶部、悬浮效果和生成文件操作,希望对大家的工作和学习有所帮助!

操作方法

  • 01

    打开Axure RP软件,点击工程,选择页面样式编辑器,在页面样式编辑器里有对齐,字体选项,将页面调试为居中显示,字体选择宋体,如下图所示:

  • 02

    点击布置,选择网格和辅助线,根据需要进行调试。网格和辅助线对设计会起到辅助作用,如下图所示:

轮播图片

  • 01

    做轮播图,轮播图也是动态的,同样也需要动态面板。将动态面板拖动致设计区,调整位置和大小,并设置状态。然后在添加一个图片切换指示按钮,也是用动态面板,添加状态,在每个状态里显示不同的指示样式,如下图所示:

  • 02

    点击右侧编辑区里的载入时,设动画效果。设置的参数要和轮播的图片对应,设置参数,如下图所示:

  • 03

    点击预览,查看效果,如下图所示:

返回顶部

  • 01

    在最下面有一个回到顶部的按钮,在库里找个矩形和一个箭头,按快捷键Ctrl+G,将其组合,然后右键,转换为动态面板,如下图所示:

  • 02

    在库里在选择一个占位符,放到最顶端,透明度设置为0,如下图所示:

  • 03

    选择返回顶部按钮,设置鼠标单击时的参数,如下图所示:

  • 04

    点击确定,返回顶部按钮就设置完成了。

悬浮效果

  • 01

    做右侧的欢迎咨询,它是浮动在右侧的。按照欢迎咨询的样式编辑好后,转换为动态面板,选择固定到浏览器,设置参数,如下图所示:

  • 02

    到这里,数通畅联官网首页的内容全部做完了,点击预览,就可以看到以假乱真的设计原型了,如下图所示:

生成文件

  • 01

    预览没有问题后,点击发布按钮,生成html文件,如下图所示:

  • 02

    弹出编辑框,选择生成路径,点击生成,就可以生成html文件了,如下图所示:

(0)

相关推荐

  • DW制作九宫格全屏亮灯轮播图片且自动切换图片教程

    本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 方法/步骤 1.打开Adobe Dreamweaver,新建一个网页.然后在& ...

  • bootstrap怎样制作轮播图呢

    bootstrap制作轮播图非常方便,今天咪咪我就来给大家讲解一下bootstrap怎样制作轮播图. 操作方法 01 打开Hbuilder,新建一个轮播图的项目,如图,轮播图用到有图片,哈哈,这里我就 ...

  • 怎样制作轮播图

    轮播图在网页中经常见到,视觉效果也是很不错的,今天咪咪我就来分享怎样使用jq插件来制作轮播图,一起来看看吧! 操作方法 01 首先,安装打开好hbuilder,然后新建一个web项目,新建项目操作如图 ...

  • Axure RP 8怎么设计图片点赞功能的网页原型?

    Axure RP 8怎么设计图片点赞功能的网页原型? 1.打开Axure RP 8软件,在元件库中找到图片元件,拖一个到画布上,如下图所示: 2.在"Icons"中找到手形向上和手 ...

  • JS制作轮播图

    轮播图是每个网站中必不可少的元素,那么如何用JS制作轮播图呢?下面小编就给大家分享一下. 操作方法 01 首先需要在Sublime中创建HTML文档,然后在文档的body区域中加入如下图所示的轮播图内 ...

  • powerpoint制作多个图片循环淡入淡出效果

    使用powerpoint制作多个图片循环淡入淡出效果,这个效果对于ppt演讲非常有帮助,可以增加生动,有趣的效果,推荐过来,大家快快来学习吧! 方法主要运用自定义动画添加效果,同时谈到了更改图片的大小 ...

  • 如何用Axure RP制作图片轮播

    对于初学者,在用Axure RP软件制作原型网页时,想使图片轮播怎么办?不需愁眉不展,小编现在现身给你支一招,看好了哦! 操作方法 01 首先从部件库中拖图片部件到面板中,如图所示. 02 右击部件, ...

  • axure RP 8怎么做图片轮换的效果?

    在系统或网站中,经常用到图片定时或点击轮换,可以给用户一个吸引人的美观印象.Axure RP 8原型设计界面可以实现图片轮换,下面利用一个实例说明图片轮换的效果,操作如下: 1.打开Axure RP ...

  • ps怎么制作轮播海报

    制作时尚的轮播靴子海报. 操作方法 01 双击ps打开,新建776x300px. 02 打开背景图层,移动工具放到背景图层中,ctrl+t自由变换调整位置. 03 将产品图打开,移动到背景图层上,添加 ...