Axure RP9 绘制页面漂浮框,用于广告,重大事项等提示

简介:本案例实现了页面悬浮框的漂浮、鼠标移入停止移动、移出继续移动及漂浮窗的关闭效果。

可用于广告,重大事项等提示

案例下载地址:https://download.csdn.net/download/shandongmike/87636012

效果图

 制作过程

1、拖入一悬浮框及关闭按钮

2、悬浮框及关闭按钮设为组合“漂浮窗”

3、添加全局变量xzengliang,yzengliang如下图

4、给悬浮框组件添加旋转时事件(这里只要是不被使用的事件就可,也可以单独添加触发事件的按钮),设置移动悬浮窗到达指定位置,如下图

   4.1、设置x轴到达位置

   4.2、设置y轴到达位置

  4.3、设置移动的边界,并添加等待时间,触发关闭按钮旋转时事件

5、给关闭按钮添加鼠标单击事件,单击隐藏漂浮窗

6、添加全局标量mouseyiru(移入鼠标的标记) 

7、给关闭(X组件)按钮添加旋转时事件,分为鼠标移入,漂浮框在四个顶点,在四个边、其它共10中情况的处理。

8、给悬浮窗添加鼠标移入、移出事件,如下图所示

9、最后添加页面载入时的事件,用来触发漂浮框移动,OK,一个简单的漂浮窗案例就做好了!!

 

注意:

漂浮窗的初始位置,最好不要放到边或顶点上

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值