查看: 67058|回复: 18

[PC端] axure7实现导航栏的自动延伸100%自适应宽度

[复制链接]

0

主题

29

回帖

171

积分

会员

Rank: 5Rank: 5

积分
171
发表于 2014-7-31 16:09:24 | 显示全部楼层 |阅读模式
尹广磊公众帐号
1、将底图做成一个动态面板,选择属性中的选项 100%宽度
2、将title做成另外一个动态面板。
     页面载入和窗口大小改变时都动态获取x坐标。

这样无论分辨率多大。title都能居中显示。背景的颜色图片也能够自动填慢整个宽度。

2014-07-31_18-57-38.jpg

演示地址:http://48qs1j.share.hiaxure.com/

导航栏的无限延伸.rp

56.89 KB, 下载次数: 1660

513

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
75210
QQ
发表于 2014-7-31 18:58:13 | 显示全部楼层
很不错的思路。
另一个制作方法。
http://www.hiaxure.com/thread-11659-1-1.html

0

主题

36

回帖

211

积分

会员

Rank: 5Rank: 5

积分
211
发表于 2014-7-31 21:41:13 | 显示全部楼层
下载下来试试看看

0

主题

10

回帖

111

积分

会员

Rank: 5Rank: 5

积分
111
QQ
发表于 2014-8-24 20:49:55 | 显示全部楼层
作者这里面还是用了障眼法,其导航栏图片设置了一个很大的宽度(1500PX),浏览器宽度变化时,其实只是右侧逐步遮挡了这个导航栏图片。

我将自己改良后的原型上传,运用了【尹广磊】老师曾经提示到的一个axure 7的动态面板可以设置背景重复功能,实现了真正的无限宽度导航栏。
ASKA_无限导航栏宽度演示.jpg

ASKA_无限导航栏宽度演示.rp

60.22 KB, 下载次数: 872

君子不以言举人,不以人废言。

0

主题

11

回帖

16

积分

会员

Rank: 5Rank: 5

积分
16
发表于 2014-9-24 14:06:01 | 显示全部楼层
4# askaqing


感谢分享,学习中。

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2014-10-8 16:43:56 | 显示全部楼层
中间的字不用那么麻烦,直接用“固定到浏览器”就能实现相同效果了

0

主题

1

回帖

42

积分

会员

Rank: 5Rank: 5

积分
42
发表于 2014-10-10 18:23:52 | 显示全部楼层
赞一个!

0

主题

1

回帖

11

积分

会员

初级

Rank: 5Rank: 5

积分
11
发表于 2014-11-3 16:58:38 | 显示全部楼层
4# askaqing

谢谢分享 学习了~

0

主题

13

回帖

16

积分

会员

Rank: 5Rank: 5

积分
16
发表于 2015-2-12 16:25:38 | 显示全部楼层
感谢分享

0

主题

2

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-3-27 00:12:21 | 显示全部楼层
学习了

0

主题

2

回帖

584

积分

会员

Rank: 5Rank: 5

积分
584
发表于 2015-4-2 10:39:36 | 显示全部楼层
赞!!!!

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-4-11 22:41:31 | 显示全部楼层
刚学习这个工具,很强大

0

主题

2

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-4-14 17:34:48 | 显示全部楼层
多交流交流

0

主题

11

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2015-6-9 10:46:45 | 显示全部楼层
谢谢,学习了

0

主题

8

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2015-7-31 09:50:33 | 显示全部楼层
一年后的今天正好搜索到这篇帖子,也是缘分,学些学些~

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-10-30 14:34:43 | 显示全部楼层
不错,下载了,很具有参考意义

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-11-11 13:29:56 | 显示全部楼层
4# askaqing


如果选择整体居中的话,
这个文字会偏左180像素,
我是新手,不知道在设计站点的时候是不是一般不使用“整体居中”

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-11-29 13:36:41 | 显示全部楼层
4# askaqing


请问[[Window.width/2-LVAR1.width/2]]这里面的LVAR1是指title这个动态面板吗?还是要到哪里设置的呀?刚刚接触Axure,求指导:'(

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2016-6-18 10:43:49 | 显示全部楼层
:victory:
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-29 05:54

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表