欢迎您加入草根网站目录: 提交网站流程 -> 注册会员 -> 提交网站 -> 等待审核...
数据统计:122个主题分类,487个优秀站点,228个站点正在排队审核,7209篇站长资讯
网站快速审核仅需10元/站,联系:点击这里给我发消息
当前位置:草根网站目录 » 站长资讯 » 站长资讯 » 行业资讯 » 文章详细 订阅RssFeed

Axure教程:Banner图片联动伸缩效果

来源:草根网站目录 浏览:70次 时间:2018-10-19

.

QQ截图20181010140918.jpg

图片来源图虫:已授站长之家使用

Axure做动态效果,只要了解了其动作规律就很好实现。

一、分析动作

1. 分析整体如下所示,是图片宽度和位移的改变;

2. 分析细节1,图片初始只显示一部分,移上去才显示完整;

3. 分析细节2,初始无按钮,移上去有按钮;

二、准备

1. 添加n个(这里是4)动态面板,分别命名“1”、“2”、“3”、“4”;

2. 添加一个矩形元件,命名“事件触发器”,初始为显示状态;

我个人有时候比较喜欢将所有事件写在一个元件上,可以把它叫做事件触发器,有点像程序开发中的function(),逻辑如下:

它的显示隐藏状态变化来做事件触发的动作。

设置几个局部变量值,橙色“值”的元件需要命名,对应英文“w”、”wplus”、”n”、”h”、”x”。

使用/局部变量/方便将整个动画打包为一个组件使用在任何地方,使用/变量/方便根据需要一键改变图片大小等。“x”的值时组件加载时动态获取的,计算公式为:

三、实现效果

1. 鼠标移上去图片伸展

每张图片上都添加相同事件

第几张图片,

,这里的数字就是几。注意:标注的“1”、“2”步执行顺序不能调换。

在矩形“事件触发器”上添加/隐藏/事件,案例中是获取的元件文字值,为了方便理解,右侧写了原理,按照所写的文字内容添加事件即可。

2. 鼠标移出图片还原

在每张图片上都添加相同事件:

在矩形“事件触发器”上添加/显示/事件:

3. 细节1,图片初始只显示一部分,移上去才显示完整

存放图片的动态面板设置背景,如下设置:

4. 细节2,初始无按钮,移上去有按钮

在存放图片的动态面板里放置按钮,初始隐藏。

鼠标移入时,在“事件触发器”上的隐藏事件中添加一步,显示按钮。

鼠标移出时,在“事件触发器”上的显示事件中添加一步,隐藏按钮。

在按钮上添加隐藏显示事件。

-完-

本文章“草根网站目录 www.571517.com”编辑收录

转载请注明-原文链接:Axure教程:Banner图片联动伸缩效果

推荐站点

  • 365体育365体育

    看足球比分,上365体育网(www.365ty.cn).三六五体育提供最快最准最全的足球比分,比分直播,篮球比分直播,足球即时比分,365足球比赛在线观看与比赛现场同步,更有赛事数据统计,现场分析等专业体育数据及综合球类比分直播的体育资讯网站.

    www.365ty.cn
  • 365体育365体育

    365体育权威提供最全体育新闻,体育数据,365体育网址.聚合知名体育比分网:球探比分,7m比分,90比分,捷报比分,8bo比分,大赢家体育比分.7m篮球比分,90vs篮球比分,188篮球比分等综合比分专题参考.提供快,准,全的足球即时比分,比分直播,足球比分直播与比赛现场同步,赛事数据统计等专业数据.

    www.365ty.com.cn
  • 365体育365体育

    看体育,上365体育.365体育提供权威体育比分数据,体育新闻.体育足球网址导航.展示多家知名足球比分网:球探比分网,365足球比分,90比分,捷报比分,8bo比分,大赢家体育.7m篮球比分,90vs篮球比分,188篮球比分等综合比分数据参考.提供快,准,全的足球即时比分,比分直播,足球比分直播与体育比赛现场同步,赛事数据统计等专业比分数据.

    www.365ty.com
  • 网页游戏大全网页游戏大全

    UU游戏论坛是国内领先的热门网页游戏公益服平台;致力打造优质的页游新服和新开网页游戏大全为己任,专业提供新出网页游戏、稀有游戏、页游开服表等服务。

    www.uuwl520.com
  • 微商厂家货源微商厂家货源

    微商厂家货源的好坏是提升微商代理品牌与人气声望的唯一途径,微信用户找优质的微商代理货源、微商货源以及高端的微商推广技巧等信息请关注微商厂家货源网:www.comicbar.com.cn。

    www.comicbar.com.cn
  • 男人团男人团

    男人天堂每日为您及时分享男人资讯内容,如八卦,搞笑,美女,资讯,数码,游戏,健康,情感,手机,婚姻,爱情精彩内容,做男人喜爱的资讯网站,一切尽在男人天堂!

    www.andr.com.cn