神刀安全网

Axure模板库(12)-网站交互

【文章摘要】开始往模板里加整页的交互了。介绍几个网站中常见的交互怎么做。更多的内容可以下载下来研究,地址在最后。

Axure模板库(12)-网站交互

本文作者:Axure大师  微信公众号:axure123 原文地址: 猛戳这里

【相关推荐】

Axure模板库(6)-后台

Axure模板库(7)-即时通讯

Axure模板库(8)-常见网站之产品介绍

Axure模板库(9)-常见网站之产品价格

Axure模板库(10)-常见网站之客户评价&关于我们&联系我们

Axure模板库(11)-个人页面

  • 自适应的轮播图
  • 隐藏的导航栏
  • 鼠标悬停状态
  • 异步滚动的背景图
  • 页面定位滚动
  • 页面跳转

1、自适应的轮播图

(1)轮播图可以通过“设置面板状态”实现。设置“循环间隔”后,可以实现定时自动轮播。

Axure模板库(12)-网站交互

(2)怎么在不同分辨率下,让图片都完整显示呢?动态面板设置成100%宽度。

Axure模板库(12)-网站交互

设置背景图片,然后选择“填充”方式。这样图片就可以自动适应各种屏幕了。

Axure模板库(12)-网站交互

2、隐藏的导航栏

用户下滑页面时,弹出导航栏,可以方便用户随时切换页面。

Axure模板库(12)-网站交互

这种效果可以通过“显示动态面板”来实现。选择“向下滑动”动画,让导航栏更自然的出现。

Axure模板库(12)-网站交互

3、鼠标悬停状态

(1)“矩形”元件的悬停状态可以通过“交互样式设置”来实现

Axure模板库(12)-网站交互

(2)稍微复杂的悬停状态可以通过显示动态面板来实现。选择“弹出效果”的话,鼠标移出时,面板会自动隐藏。

Axure模板库(12)-网站交互

4、异步滚动的背景图

我用的是笨方法,列了一个二元一次方程,算出图片怎么跟随窗口的滚动而移动。Window.scrollY表示浏览器左上角在页面中的Y坐标。

Axure模板库(12)-网站交互

5、页面定位滚动

效果是点击某按钮,页面移动到某位置。可以通过“滚动到元件”动作来实现。选择的元件的坐标位置就是页面移动的目标位置。

Axure模板库(12)-网站交互

6、页面跳转

这个比较简单,点击时“打开链接”。目标可以指向axure项目中的页面,也可以指向某个网趾。

Axure模板库(12)-网站交互

源文件下载地址 : 戳我,戳我

文章作者:Axure大师,微信公众号:axure123,想看更多的模板、案例可关注作者公众号。

Axure模板库(12)-网站交互

本文由@Axure大师 授权发布

转载请联系作者本人

产品100非常欢迎产品界的各路大神、人神、女神、男神、土豪、屌丝来稿!

共同分享爱,明天会更好,小编等你来稿:ann@chanpin100.com

少年关注我们的官方微博@产品100和微信订阅号:chanpin100ghsd,有惊喜哦!

Axure模板库(12)-网站交互

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Axure模板库(12)-网站交互

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址