• 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教程:导航栏和广告悬停效果制作

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

本文主要包含axure鼠标悬停,axure鼠标悬停效果,axure悬停,导航栏悬停,导航栏鼠标悬停等相关知识, @beikehuahua 希望在学习及工作中可以帮助到您

这篇文章,手把手教你如何用Axure做出:“任随窗口滚动,而导航部分卡片保持不动,(即卡片始终悬停在指定的位置)”的效果。

如黄色框始终悬浮效果。

123

只需要一个事件:3个步骤。

第一步,做好导航菜单项部分,然后全选住,点击右键”转换为动态面板”,并在右侧的元件命名处,命名为title。

0000

第二步:做好下面的主体内容部分。(我用图片占位符和矩形,随意表示一下主体内容部分)

第三步:设置窗口滚动事件:

(1 ) 在页面下的“页面交互”选项卡下找到“窗口滚动时”事件。

12345678

(2)然后按照下图中的数字顺序1->2->3->4->5点击选择设置:

(移动—勾选动态面板title—-选择“绝对位置到”)

12345

点击第二个fx(y坐标对应),弹出“编辑值”窗口。

点击“插入变量”,选择 ?Window.scrollY。

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

123456

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

确定事件。

预览或生成一下,就能看到你想要的效果,任你页面内容有多长,title部分内容始终在上头屹立不动。

这样的方式还可以做到任意位置,如在页面旁边放广告,只要你设置好绝对位置的y坐标轴,任你窗口如何滚动,小广告始终安静地悬挂在那里。

事件:窗口滚动时 移动 ?某个元件(内容生成的动态面板或小图片)绝对位置到 y:fx ?。

设置 ?fx通常有以下几种结果:

[[Window.scrollY]]

[[Window.scrollY+200]] ( 200为举例,坐标根据实际情况定)。

下面试试做个右侧悬浮不动的小广告吧~~~

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

  • Axure教程:导航栏和广告悬停效果制作

相关文章

  • 2017-06-14Axure教程 | 商品列表页筛选排序练习
  • 2017-06-13Axure 7.0实例:利用Axure制作放大镜原型
  • 2017-06-13Axure中继器实践:如何制作一个「记忆翻牌」小游戏?
  • 2017-06-13Axure教程:怎样做低保真轨迹追踪与回放
  • 2017-06-14Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
  • 2017-06-13Axure中继器姊妹篇:列表页添加排序和筛选功能
  • 2017-06-13三步教你 Axure 原型变身 EXE 程序
  • 2017-06-14Axure教程 | 原型中的商品图放大镜效果
  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)
  • 2017-06-13Axure教程:限制输入框输入字数

文章分类

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

最近更新的内容

    • Axure教程-体验一下 iPhone 6
    • Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
    • Axure7.0教程(一)中继器的使用(1)
    • axure实现网站的通用注册原型设计
    • Axure教程:微信面对面建群原型设计
    • Axure实现两种滑动的方式(附源文件下载)
    • Axure教程:导航栏和广告悬停效果制作
    • 三步教你 Axure 原型变身 EXE 程序
    • Axure7.0教程(四)中继器的使用(4)
    • Axure教程:原型设计之转盘抽奖

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

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